<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>jQuery常用操作 - vzvixb</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="even" /><meta name="description" content="一、简介 定义 　jQuery创始人是美国John Resig，是优秀的Javascript框架； jQuery是一个轻量级、快速简洁的javaScript库。源码戳这
jQuery对象 　jQuery产生的对象时jQuery独有的，只能自己调用
书写规则 　支持链式操作； 在变量前加&amp;quot;$&amp;ldquo;符号（var $variable = jQuery 对象）； 注：此规定并不是强制要求。
" /><meta name="keywords" content="Hugo, theme, even" />






<meta name="generator" content="Hugo 0.90.1 with theme even" />


<link rel="canonical" href="https://zhouxiaoxin.gitee.io/post/javascript/jquery%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<link href="/sass/main.min.32d4dc642fec98c34c80bebb9c784c50771712b4a8a25d9f4dd9cce3534b426e.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="jQuery常用操作" />
<meta property="og:description" content="一、简介
定义
　　jQuery创始人是美国John Resig，是优秀的Javascript框架；
　　jQuery是一个轻量级、快速简洁的javaScript库。源码戳这
jQuery对象
　　jQuery产生的对象时jQuery独有的，只能自己调用
书写规则
　　支持链式操作；
　　在变量前加&quot;$&ldquo;符号（var $variable = jQuery 对象）；
　　注：此规定并不是强制要求。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://zhouxiaoxin.gitee.io/post/javascript/jquery%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2017-08-10T14:27:00+00:00" />
<meta property="article:modified_time" content="2017-08-10T14:27:00+00:00" />

<meta itemprop="name" content="jQuery常用操作">
<meta itemprop="description" content="一、简介
定义
　　jQuery创始人是美国John Resig，是优秀的Javascript框架；
　　jQuery是一个轻量级、快速简洁的javaScript库。源码戳这
jQuery对象
　　jQuery产生的对象时jQuery独有的，只能自己调用
书写规则
　　支持链式操作；
　　在变量前加&quot;$&ldquo;符号（var $variable = jQuery 对象）；
　　注：此规定并不是强制要求。"><meta itemprop="datePublished" content="2017-08-10T14:27:00+00:00" />
<meta itemprop="dateModified" content="2017-08-10T14:27:00+00:00" />
<meta itemprop="wordCount" content="10854">
<meta itemprop="keywords" content="jQuery," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="jQuery常用操作"/>
<meta name="twitter:description" content="一、简介
定义
　　jQuery创始人是美国John Resig，是优秀的Javascript框架；
　　jQuery是一个轻量级、快速简洁的javaScript库。源码戳这
jQuery对象
　　jQuery产生的对象时jQuery独有的，只能自己调用
书写规则
　　支持链式操作；
　　在变量前加&quot;$&ldquo;符号（var $variable = jQuery 对象）；
　　注：此规定并不是强制要求。"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">Even</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">Home</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">Archs</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">Tags</li>
      </a><a href="/categories/">
        <li class="mobile-menu-item">Cates</li>
      </a><a href="/about/">
        <li class="mobile-menu-item">About</li>
      </a><a href="/pages/runoob/">
        <li class="mobile-menu-item">runoob</li>
      </a><a href="/pages/98wubi/">
        <li class="mobile-menu-item">98wubi</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">Even</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">Home</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">Archs</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">Tags</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories/">Cates</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/about/">About</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/pages/runoob/">runoob</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/pages/98wubi/">98wubi</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">jQuery常用操作</h1>

      <div class="post-meta">
        <span class="post-time"> 2017-08-10 </span>
        <div class="post-category">
            <a href="/categories/jquery/"> jQuery </a>
            </div>
          <span class="more-meta"> 约 10854 字 </span>
          <span class="more-meta"> 预计阅读 22 分钟 </span>
        <span id="busuanzi_container_page_pv" class="more-meta"> <span id="busuanzi_value_page_pv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 次阅读 </span>
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#一简介">一、简介</a>
      <ul>
        <li><a href="#定义">定义</a></li>
        <li><a href="#jquery对象">jQuery对象</a></li>
        <li><a href="#书写规则">书写规则</a></li>
      </ul>
    </li>
    <li><a href="#二寻找元素">二、寻找元素</a>
      <ul>
        <li><a href="#1基本筛选器">1.基本筛选器</a></li>
        <li><a href="#2内容选择器">2.内容选择器</a></li>
        <li><a href="#3表单选择器">3.表单选择器</a></li>
        <li><a href="#4筛选器">4.筛选器</a></li>
      </ul>
    </li>
    <li><a href="#三属性操作">三、属性操作</a>
      <ul>
        <li><a href="#1基本属性操作">1.基本属性操作</a></li>
        <li><a href="#2css类">2.CSS类</a></li>
      </ul>
    </li>
    <li><a href="#四css操作">四、CSS操作</a>
      <ul>
        <li><a href="#1样式">1.样式</a></li>
        <li><a href="#2位置">2.位置</a></li>
        <li><a href="#3尺寸">3.尺寸</a></li>
      </ul>
    </li>
    <li><a href="#五文档处理">五、文档处理</a>
      <ul>
        <li><a href="#1内部插入">1.内部插入</a></li>
        <li><a href="#2外部插入">2.外部插入</a></li>
        <li><a href="#3替换">3.替换</a></li>
        <li><a href="#4删除">4.删除</a></li>
        <li><a href="#5复制">5.复制</a></li>
      </ul>
    </li>
    <li><a href="#六事件">六、事件</a>
      <ul>
        <li><a href="#1页面载入">1.页面载入</a></li>
        <li><a href="#2页面处理">2.页面处理</a></li>
        <li><a href="#3页面委派">3.页面委派</a></li>
        <li><a href="#4事件">4.事件</a></li>
        <li><a href="#5evnet-object属性方法">5.(evnet object)属性方法：</a></li>
      </ul>
    </li>
    <li><a href="#七效果">七、效果</a>
      <ul>
        <li><a href="#1基本">1.基本</a></li>
        <li><a href="#2滑动">2.滑动</a></li>
        <li><a href="#3淡入淡出">3.淡入淡出</a></li>
      </ul>
    </li>
    <li><a href="#八对象访问">八、对象访问</a></li>
    <li><a href="#九插件拓展机制">九、插件拓展机制</a>
      <ul>
        <li><a href="#1方式一">1.方式一</a></li>
        <li><a href="#2方式二">2.方式二</a></li>
      </ul>
    </li>
    <li><a href="#十实例">十、实例</a>
      <ul>
        <li><a href="#1返回顶部">1.返回顶部</a></li>
        <li><a href="#2左侧菜单">2.左侧菜单</a></li>
        <li><a href="#3菜单切换">3.菜单切换</a></li>
        <li><a href="#4滚动菜单">4.滚动菜单</a></li>
        <li><a href="#5淡入淡出">5.淡入淡出</a></li>
        <li><a href="#6滑动">6.滑动</a></li>
        <li><a href="#7隐藏与显示">7.隐藏与显示</a></li>
        <li><a href="#8添加与删除标签">8.添加与删除标签</a></li>
        <li><a href="#9商城商品放大镜">9.商城商品放大镜</a></li>
        <li><a href="#10商城菜单">10.商城菜单</a></li>
        <li><a href="#11拖动面板">11.拖动面板</a></li>
        <li><a href="#12模态对话框">12.模态对话框</a></li>
        <li><a href="#13轮播图">13.轮播图</a></li>
        <li><a href="#14编辑框">14.编辑框</a></li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <h2 id="一简介">一、简介</h2>
<h3 id="定义">定义</h3>
<p>　　jQuery创始人是美国John Resig，是优秀的Javascript框架；
　　jQuery是一个轻量级、快速简洁的javaScript库。<a href="https://jquery.com/download/">源码戳这</a></p>
<h3 id="jquery对象">jQuery对象</h3>
<p>　　jQuery产生的对象时jQuery独有的，只能自己调用</p>
<h3 id="书写规则">书写规则</h3>
<p>　　支持链式操作；
　　在变量前加&quot;$&ldquo;符号（var $variable = jQuery 对象）；
　　注：此规定并不是强制要求。</p>
<h2 id="二寻找元素">二、寻找元素</h2>
<ul>
<li>选择器</li>
<li>基本选择器</li>
<li>层级选择器</li>
<li>属性选择器</li>
</ul>
<h3 id="1基本筛选器">1.基本筛选器</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;li:first&#39;</span><span class="p">)</span>    <span class="c1">//第一个元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;li:last&#39;</span><span class="p">)</span>     <span class="c1">//最后一个元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr:even&#34;</span><span class="p">)</span>     <span class="c1">//索引为偶数的元素，从 0 开始
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr:odd&#34;</span><span class="p">)</span>      <span class="c1">//索引为奇数的元素，从 0 开始
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr:eq(1)&#34;</span><span class="p">)</span>    <span class="c1">//给定索引值的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr:gt(0)&#34;</span><span class="p">)</span>    <span class="c1">//大于给定索引值的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr:lt(2)&#34;</span><span class="p">)</span>    <span class="c1">//小于给定索引值的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:focus&#34;</span><span class="p">)</span>      <span class="c1">//当前获取焦点的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:animated&#34;</span><span class="p">)</span>   <span class="c1">//正在执行动画效果的元素
</span></code></pre></td></tr></table>
</div>
</div><h3 id="2内容选择器">2.内容选择器</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;div:contains(&#39;nick&#39;)&#34;</span><span class="p">)</span>    <span class="c1">//包含nick文本的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;td:empty&#34;</span><span class="p">)</span>    <span class="c1">//不包含子元素或者文本的空元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;div:has(p)&#34;</span><span class="p">)</span>  <span class="c1">//含有选择器所匹配的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;td:parent&#34;</span><span class="p">)</span>   <span class="c1">//含有子元素或者文本的元素
</span></code></pre></td></tr></table>
</div>
</div><h3 id="3表单选择器">3.表单选择器</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:input&#34;</span><span class="p">)</span>   <span class="c1">//匹配所有 input, textarea, select 和 button 元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:text&#34;</span><span class="p">)</span>       <span class="c1">//所有的单行文本框
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:password&#34;</span><span class="p">)</span>   <span class="c1">//所有密码框
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:radio&#34;</span><span class="p">)</span>      <span class="c1">//所有单选按钮
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:checkbox&#34;</span><span class="p">)</span>   <span class="c1">//所有复选框
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:submit&#34;</span><span class="p">)</span>     <span class="c1">//所有提交按钮
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:reset&#34;</span><span class="p">)</span>      <span class="c1">//所有重置按钮
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:button&#34;</span><span class="p">)</span>     <span class="c1">//所有button按钮
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;:file&#34;</span><span class="p">)</span>       <span class="c1">//所有文件域
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input:checked&#34;</span><span class="p">)</span>    <span class="c1">//所有选中的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;select option:selected&#34;</span><span class="p">)</span>    <span class="c1">//select中所有选中的option元素
</span></code></pre></td></tr></table>
</div>
</div><h3 id="4筛选器">4.筛选器</h3>
<h4 id="41-过滤">4.1 过滤</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>       <span class="c1">//当前操作中第N个jQuery对象,类似索引
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">).</span><span class="nx">first</span><span class="p">()</span>    <span class="c1">//第一个元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">).</span><span class="nx">last</span><span class="p">()</span>     <span class="c1">//最后一个元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="s2">&#34;test&#34;</span><span class="p">)</span>    <span class="c1">//元素是否含有某个特定的类,返回布尔值
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">).</span><span class="nx">has</span><span class="p">(</span><span class="s1">&#39;ul&#39;</span><span class="p">)</span>  <span class="c1">//包含特定后代的元素
</span></code></pre></td></tr></table>
</div>
</div><h4 id="42-查找">4.2 查找</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;div&#34;</span><span class="p">).</span><span class="nx">children</span><span class="p">()</span>      <span class="c1">//div中的每个子元素,第一层
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;div&#34;</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;span&#34;</span><span class="p">)</span>    <span class="c1">//div中的包含的所有span元素,子子孙孙
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">next</span><span class="p">()</span>       　　　<span class="c1">//紧邻p元素后的一个同辈元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">nextAll</span><span class="p">()</span>         <span class="c1">//p元素之后所有的同辈元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#test&#34;</span><span class="p">).</span><span class="nx">nextUntil</span><span class="p">(</span><span class="s2">&#34;#test2&#34;</span><span class="p">)</span>            <span class="c1">//id为&#34;#test&#34;元素之后到id为&#39;#test2&#39;之间所有的同辈元素,掐头去尾
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">prev</span><span class="p">()</span>            <span class="c1">//紧邻p元素前的一个同辈元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">prevAll</span><span class="p">()</span>         <span class="c1">//p元素之前所有的同辈元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#test&#34;</span><span class="p">).</span><span class="nx">prevUntil</span><span class="p">(</span><span class="s2">&#34;#test2&#34;</span><span class="p">)</span>    <span class="c1">//id为&#34;#test&#34;元素之前到id为&#39;#test2&#39;之间所有的同辈元素,掐头去尾
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">parent</span><span class="p">()</span>          <span class="c1">//每个p元素的父元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">parents</span><span class="p">()</span>         <span class="c1">//每个p元素的所有祖先元素,body,html
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#test&#34;</span><span class="p">).</span><span class="nx">parentsUntil</span><span class="p">(</span><span class="s2">&#34;#test2&#34;</span><span class="p">)</span>    <span class="c1">//id为&#34;#test&#34;元素到id为&#39;#test2&#39;之间所有的父级元素,掐头去尾
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;div&#34;</span><span class="p">).</span><span class="nx">siblings</span><span class="p">()</span>      <span class="c1">//所有的同辈元素,不包括自己
</span></code></pre></td></tr></table>
</div>
</div><h2 id="三属性操作">三、属性操作</h2>
<h3 id="1基本属性操作">1.基本属性操作</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;img&#34;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;src&#34;</span><span class="p">);</span>    　　　　　　 <span class="c1">//返回文档中所有图像的src属性值
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;img&#34;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;src&#34;</span><span class="p">,</span><span class="s2">&#34;test.jpg&#34;</span><span class="p">);</span>    <span class="c1">//设置所有图像的src属性
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;img&#34;</span><span class="p">).</span><span class="nx">removeAttr</span><span class="p">(</span><span class="s2">&#34;src&#34;</span><span class="p">);</span>    　　　<span class="c1">//将文档中图像的src属性删除
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input[type=&#39;checkbox&#39;]&#34;</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s2">&#34;checked&#34;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>    <span class="c1">//选中复选框
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input[type=&#39;checkbox&#39;]&#34;</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s2">&#34;checked&#34;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">&#34;img&#34;</span><span class="p">).</span><span class="nx">removeProp</span><span class="p">(</span><span class="s2">&#34;src&#34;</span><span class="p">);</span>    　　 <span class="c1">//删除img的src属性
</span></code></pre></td></tr></table>
</div>
</div><h3 id="2css类">2.CSS类</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;selected&#34;</span><span class="p">);</span>    　　<span class="c1">//为p元素加上 &#39;selected&#39; 类
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;selected&#34;</span><span class="p">);</span>    <span class="c1">//从p元素中删除 &#39;selected&#39; 类
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">&#34;selected&#34;</span><span class="p">);</span>    <span class="c1">//如果存在就删除,否则就添加HTML代码/文本/值
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">();</span>    　　　　　　　　　　 <span class="c1">//返回p元素的html内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&#34;Hello &lt;b&gt;nick&lt;/b&gt;!&#34;</span><span class="p">);</span>  <span class="c1">//设置p元素的html内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">).</span><span class="nx">text</span><span class="p">();</span>    　　　　　　　　　　 <span class="c1">//返回p元素的文本内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s2">&#34;nick&#34;</span><span class="p">);</span>    　　　　　　　<span class="c1">//设置p元素的文本内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input&#34;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>    　　　　　　　　 <span class="c1">//获取文本框中的值
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input&#34;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s2">&#34;nick&#34;</span><span class="p">);</span>     　　　　 <span class="c1">//设置文本框中的内容
</span></code></pre></td></tr></table>
</div>
</div><h2 id="四css操作">四、CSS操作</h2>
<h3 id="1样式">1.样式</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;color&#34;</span><span class="p">);</span>          <span class="c1">//访问查看p元素的color属性
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;color&#34;</span><span class="p">,</span><span class="s2">&#34;red&#34;</span><span class="p">);</span>    <span class="c1">//设置p元素的color属性为red
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span> <span class="s2">&#34;color&#34;</span><span class="o">:</span> <span class="s2">&#34;red&#34;</span><span class="p">,</span> <span class="s2">&#34;background&#34;</span><span class="o">:</span> <span class="s2">&#34;yellow&#34;</span> <span class="p">});</span>    <span class="c1">//设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
</span></code></pre></td></tr></table>
</div>
</div><h3 id="2位置">2.位置</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">).</span><span class="nx">offset</span><span class="p">()</span>     <span class="c1">//元素在当前视口的相对偏移,Object {top: 122, left: 260}
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">position</span><span class="p">()</span>   <span class="c1">//元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span>    <span class="c1">//获取滚轮滑的高度
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollLeft</span><span class="p">()</span>   <span class="c1">//获取滚轮滑的宽度
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">(</span><span class="s1">&#39;100&#39;</span><span class="p">)</span>    <span class="c1">//设置滚轮滑的高度为100
</span></code></pre></td></tr></table>
</div>
</div><h3 id="3尺寸">3.尺寸</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">height</span><span class="p">();</span>    <span class="c1">//获取p元素的高度
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>     <span class="c1">//获取p元素的宽度
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p:first&#34;</span><span class="p">).</span><span class="nx">innerHeight</span><span class="p">()</span>    <span class="c1">//获取第一个匹配元素内部区域高度(包括补白、不包括边框)
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p:first&#34;</span><span class="p">).</span><span class="nx">innerWidth</span><span class="p">()</span>     <span class="c1">//获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p:first&#34;</span><span class="p">).</span><span class="nx">outerHeight</span><span class="p">()</span>    <span class="c1">//匹配元素外部高度(默认包括补白和边框)
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p:first&#34;</span><span class="p">).</span><span class="nx">outerWidth</span><span class="p">()</span>     <span class="c1">//匹配元素外部宽度(默认包括补白和边框)
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p:first&#34;</span><span class="p">).</span><span class="nx">outerHeight</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span>    <span class="c1">//为true时包括边距
</span></code></pre></td></tr></table>
</div>
</div><h2 id="五文档处理">五、文档处理</h2>
<h3 id="1内部插入">1.内部插入</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s2">&#34;&lt;b&gt;nick&lt;/b&gt;&#34;</span><span class="p">);</span>    <span class="c1">//每个p元素内后面追加内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="s2">&#34;div&#34;</span><span class="p">);</span>    　　　 <span class="c1">//p元素追加到div内后
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">prepend</span><span class="p">(</span><span class="s2">&#34;&lt;b&gt;Hello&lt;/b&gt;&#34;</span><span class="p">);</span>  <span class="c1">//每个p元素内前面追加内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">prependTo</span><span class="p">(</span><span class="s2">&#34;div&#34;</span><span class="p">);</span>    　   <span class="c1">//p元素追加到div内前外部插入
</span></code></pre></td></tr></table>
</div>
</div><h3 id="2外部插入">2.外部插入</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">after</span><span class="p">(</span><span class="s2">&#34;&lt;b&gt;nick&lt;/b&gt;&#34;</span><span class="p">);</span>     <span class="c1">//每个p元素同级之后插入内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">before</span><span class="p">(</span><span class="s2">&#34;&lt;b&gt;nick&lt;/b&gt;&#34;</span><span class="p">);</span>    <span class="c1">//在每个p元素同级之前插入内容
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">insertAfter</span><span class="p">(</span><span class="s2">&#34;#test&#34;</span><span class="p">);</span>     <span class="c1">//所有p元素插入到id为test元素的后面
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">insertBefore</span><span class="p">(</span><span class="s2">&#34;#test&#34;</span><span class="p">);</span>    <span class="c1">//所有p元素插入到id为test元素的前面替换
</span></code></pre></td></tr></table>
</div>
</div><h3 id="3替换">3.替换</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">replaceWith</span><span class="p">(</span><span class="s2">&#34;&lt;b&gt;Paragraph. &lt;/b&gt;&#34;</span><span class="p">);</span>    <span class="c1">//将所有匹配的元素替换成指定的HTML或DOM元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;&lt;b&gt;Paragraph. &lt;/b&gt;&#34;</span><span class="p">).</span><span class="nx">replaceAll</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">);</span>     <span class="c1">//用匹配的元素替换掉所有 selector匹配到的元素删除
</span></code></pre></td></tr></table>
</div>
</div><h3 id="4删除">4.删除</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">empty</span><span class="p">();</span>     <span class="c1">//删除匹配的元素集合中所有的子节点，不包括本身
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>    <span class="c1">//删除所有匹配的元素,包括本身
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">detach</span><span class="p">();</span>    <span class="c1">//删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)
</span></code></pre></td></tr></table>
</div>
</div><h3 id="5复制">5.复制</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">clone</span><span class="p">()</span>    　　<span class="c1">//克隆元素并选中克隆的副本
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">clone</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span>   <span class="c1">//布尔值指事件处理函数是否会被复制
</span></code></pre></td></tr></table>
</div>
</div><h2 id="六事件">六、事件</h2>
<h3 id="1页面载入">1.页面载入</h3>
<p>当页面载入成功后再运行的函数事件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
	<span class="k">do</span> <span class="nx">something</span><span class="p">...</span>
<span class="p">});</span>
 
<span class="c1">//简写
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">do</span> <span class="nx">something</span><span class="p">...</span>
<span class="p">});</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="2页面处理">2.页面处理</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//bind 为每个匹配元素绑定事件处理函数，绑定多个用{}。
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&#34;click&#34;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
  <span class="nx">alert</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">()</span> <span class="p">);</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">menuF</span><span class="p">).</span><span class="nx">bind</span><span class="p">({</span>
    <span class="s2">&#34;mouseover&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
    <span class="p">},</span><span class="s2">&#34;mouseout&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>         
 
<span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">one</span><span class="p">(</span> <span class="s2">&#34;click&#34;</span><span class="p">,</span> <span class="nx">fun</span><span class="p">...)</span>    <span class="c1">//one 绑定一个一次性的事件处理函数
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span> <span class="s2">&#34;click&#34;</span> <span class="p">)</span>        <span class="c1">//解绑一个事件    
</span></code></pre></td></tr></table>
</div>
</div><h3 id="3页面委派">3.页面委派</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">// 与bind 不同的是当时间发生时才去临时绑定。
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">&#34;click&#34;</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span>
  <span class="k">do</span> <span class="nx">something</span><span class="p">...</span>
<span class="p">});</span>
 
<span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">undelegate</span><span class="p">();</span>    　　　<span class="c1">//p元素删除由 delegate() 方法添加的所有事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">undelegate</span><span class="p">(</span><span class="s2">&#34;click&#34;</span><span class="p">)</span>   <span class="c1">//从p元素删除由 delegate() 方法添加的所有click事件
</span></code></pre></td></tr></table>
</div>
</div><h3 id="4事件">4.事件</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>    　　<span class="c1">//单击事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">dblclick</span><span class="p">();</span>    <span class="c1">//双击事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input[type=text]&#34;</span><span class="p">).</span><span class="nx">focus</span><span class="p">()</span>  <span class="c1">//元素获得焦点时,触发 focus 事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input[type=text]&#34;</span><span class="p">).</span><span class="nx">blur</span><span class="p">()</span>   <span class="c1">//元素失去焦点时,触发 blur事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;button&#34;</span><span class="p">).</span><span class="nx">mousedown</span><span class="p">()</span><span class="c1">//当按下鼠标时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;button&#34;</span><span class="p">).</span><span class="nx">mouseup</span><span class="p">()</span>  <span class="c1">//元素上放松鼠标按钮时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">mousemove</span><span class="p">()</span>     <span class="c1">//当鼠标指针在指定的元素中移动时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">mouseover</span><span class="p">()</span>     <span class="c1">//当鼠标指针位于元素上方时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">mouseout</span><span class="p">()</span>    　<span class="c1">//当鼠标指针从元素上移开时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">keydown</span><span class="p">()</span>    <span class="c1">//当键盘或按钮被按下时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">keypress</span><span class="p">()</span>   <span class="c1">//当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input&#34;</span><span class="p">).</span><span class="nx">keyup</span><span class="p">()</span>     <span class="c1">//当按钮被松开时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scroll</span><span class="p">()</span>     <span class="c1">//当用户滚动时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">resize</span><span class="p">()</span>     <span class="c1">//当调整浏览器窗口的大小时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input[type=&#39;text&#39;]&#34;</span><span class="p">).</span><span class="nx">change</span><span class="p">()</span>    <span class="c1">//当元素的值发生改变时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input&#34;</span><span class="p">).</span><span class="nx">select</span><span class="p">()</span>    <span class="c1">//当input 元素中的文本被选择时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;form&#34;</span><span class="p">).</span><span class="nx">submit</span><span class="p">()</span>     <span class="c1">//当提交表单时触发事件
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">unload</span><span class="p">()</span>     <span class="c1">//用户离开页面时
</span><span class="c1"></span>
</code></pre></td></tr></table>
</div>
</div><h3 id="5evnet-object属性方法">5.(evnet object)属性方法：</h3>
<p>所有的事件函数都可以传入event参数方便处理事件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
 <span class="nx">alert</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">type</span><span class="p">);</span> <span class="c1">//&#34;click&#34;
</span><span class="c1"></span><span class="p">});</span> 
 
<span class="p">(</span><span class="nx">evnet</span> <span class="nx">object</span><span class="p">)</span><span class="nx">属性方法</span><span class="err">：</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">pageX</span> 　 <span class="c1">//事件发生时，鼠标距离网页左上角的水平距离
</span><span class="c1"></span><span class="nx">event</span><span class="p">.</span><span class="nx">pageY</span> 　 <span class="c1">//事件发生时，鼠标距离网页左上角的垂直距离
</span><span class="c1"></span><span class="nx">event</span><span class="p">.</span><span class="nx">type</span> 　　<span class="c1">//事件的类型
</span><span class="c1"></span><span class="nx">event</span><span class="p">.</span><span class="nx">which</span> 　 <span class="c1">//按下了哪一个键
</span><span class="c1"></span><span class="nx">event</span><span class="p">.</span><span class="nx">data</span> 　　<span class="c1">//在事件对象上绑定数据，然后传入事件处理函数
</span><span class="c1"></span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span> 　<span class="c1">//事件针对的网页元素
</span><span class="c1"></span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> 　<span class="c1">//阻止事件的默认行为(比如点击链接，会自动打开新页面)
</span><span class="c1"></span><span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">()</span>  <span class="c1">//停止事件向上层元素冒泡
</span></code></pre></td></tr></table>
</div>
</div><h2 id="七效果">七、效果</h2>
<h3 id="1基本">1.基本</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">show</span><span class="p">()</span>    　　　　<span class="c1">//显示隐藏的匹配元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">show</span><span class="p">(</span><span class="s2">&#34;slow&#34;</span><span class="p">);</span>    <span class="c1">//参数表示速度,(&#34;slow&#34;,&#34;normal&#34;,&#34;fast&#34;),也可为900毫秒
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span>    　　　　<span class="c1">//隐藏显示的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">toggle</span><span class="p">();</span>   　　 <span class="c1">//切换 显示/隐藏
</span></code></pre></td></tr></table>
</div>
</div><h3 id="2滑动">2.滑动</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="s2">&#34;900&#34;</span><span class="p">);</span>    <span class="c1">//用900毫秒时间将段落滑下
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">slideUp</span><span class="p">(</span><span class="s2">&#34;900&#34;</span><span class="p">);</span>    　<span class="c1">//用900毫秒时间将段落滑上
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">slideToggle</span><span class="p">(</span><span class="s2">&#34;900&#34;</span><span class="p">);</span>  <span class="c1">//用900毫秒时间将段落滑上，滑下
</span></code></pre></td></tr></table>
</div>
</div><h3 id="3淡入淡出">3.淡入淡出</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="s2">&#34;900&#34;</span><span class="p">);</span>    　　  <span class="c1">//用900毫秒时间将段落淡入
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="s2">&#34;900&#34;</span><span class="p">);</span>    　　 <span class="c1">//用900毫秒时间将段落淡出
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">fadeToggle</span><span class="p">(</span><span class="s2">&#34;900&#34;</span><span class="p">);</span>    　<span class="c1">//用900毫秒时间将段落淡入,淡出
</span><span class="c1"></span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">fadeTo</span><span class="p">(</span><span class="s2">&#34;slow&#34;</span><span class="p">,</span> <span class="mf">0.6</span><span class="p">);</span>    <span class="c1">//用900毫秒时间将段落的透明度调整到0.6
</span></code></pre></td></tr></table>
</div>
</div><h2 id="八对象访问">八、对象访问</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">$</span><span class="p">.</span><span class="nx">trim</span><span class="p">()</span> 　　<span class="c1">//去除字符串两端的空格
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">()</span> 　　<span class="c1">//遍历一个数组或对象，for循环
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">inArray</span><span class="p">()</span> <span class="c1">//返回一个值在数组中的索引位置，不存在返回-1
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">grep</span><span class="p">()</span> 　 <span class="c1">//返回数组中符合某种标准的元素
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">()</span>  <span class="c1">//将多个对象，合并到第一个对象
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">makeArray</span><span class="p">()</span> <span class="c1">//将对象转化为数组
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">type</span><span class="p">()</span>    <span class="c1">//判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">isArray</span><span class="p">()</span> <span class="c1">//判断某个参数是否为数组
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">isEmptyObject</span><span class="p">()</span> <span class="c1">//判断某个对象是否为空(不含有任何属性)
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">()</span>    <span class="c1">//判断某个参数是否为函数
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">isPlainObject</span><span class="p">()</span> <span class="c1">//判断某个参数是否为用&#34;{}&#34;或&#34;new Object&#34;建立的对象
</span><span class="c1"></span><span class="nx">$</span><span class="p">.</span><span class="nx">support</span><span class="p">()</span>  
</code></pre></td></tr></table>
</div>
</div><p>模拟each()内部实现机制</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">li</span> <span class="o">=</span> <span class="p">[</span><span class="mi">11</span><span class="p">,</span><span class="mi">22</span><span class="p">,</span><span class="mi">33</span><span class="p">];</span>
        <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">li</span><span class="p">,</span><span class="kd">function</span> <span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">);</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">k</span> <span class="o">==</span> <span class="mi">1</span><span class="p">){</span>
                <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>


    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">function</span> <span class="nx">myEach</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span><span class="nx">func</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o">&lt;</span><span class="nx">obj</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
                <span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="nx">func</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span><span class="nx">current</span><span class="p">);</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">ret</span> <span class="o">==</span> <span class="kc">false</span><span class="p">){</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="kd">var</span> <span class="nx">li</span> <span class="o">=</span> <span class="p">[</span><span class="mi">10</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="mi">30</span><span class="p">];</span>
        <span class="nx">myEach</span><span class="p">(</span><span class="nx">li</span><span class="p">,</span><span class="kd">function</span> <span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">);</span>
            <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="九插件拓展机制">九、插件拓展机制</h2>
<h3 id="1方式一">1.方式一</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">jQuery</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
  <span class="nx">check</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="p">});</span>
  <span class="p">},</span>
  <span class="nx">uncheck</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="p">});</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input[type=checkbox]&#34;</span><span class="p">).</span><span class="nx">check</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">&#34;input[type=radio]&#34;</span><span class="p">).</span><span class="nx">uncheck</span><span class="p">();</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="2方式二">2.方式二</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">jQuery.extend({
  min: function(a, b) { return a &lt; b ? a : b; },    //三元运算
  max: function(a, b) { return a &gt; b ? a : b; }
});

jQuery.min(2,3);     //2
jQuery.max(4,5);    //5
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span><span class="p">&gt;</span>111<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span><span class="p">&gt;</span>222<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">jQuery</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
            <span class="nx">show1</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nx">val</span> <span class="o">+</span> <span class="s2">&#34;sb&#34;</span><span class="p">;</span>
                <span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
            <span class="p">},</span>
            <span class="nx">show2</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>

            <span class="p">}</span>
        <span class="p">});</span>
        <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.title&#34;</span><span class="p">).</span><span class="nx">show1</span><span class="p">();</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret</span><span class="p">);</span>


        <span class="nx">jQuery</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
            <span class="nx">s1</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">arg</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">arg</span><span class="p">).</span><span class="nx">text</span><span class="p">();</span>
                <span class="k">return</span> <span class="nx">val</span> <span class="o">+</span> <span class="s2">&#34;sb&#34;</span><span class="p">;</span>
            <span class="p">},</span>
            <span class="nx">s2</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>

            <span class="p">}</span>
        <span class="p">});</span>
        <span class="kd">var</span> <span class="nx">ret2</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">s1</span><span class="p">(</span><span class="s2">&#34;.title&#34;</span><span class="p">);</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">ret2</span><span class="p">);</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="十实例">十、实例</h2>
<h3 id="1返回顶部">1.返回顶部</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">.</span><span class="nc">divH</span> <span class="p">{</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">1800</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">divT</span> <span class="p">{</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">font-size</span><span class="p">:</span> <span class="mi">23</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#2F4F4F</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span>
            <span class="k">right</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">bottom</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">divT</span><span class="p">:</span><span class="nd">hover</span><span class="p">{</span>
            <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">hide</span> <span class="p">{</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;divH&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;divT hide&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;ReturnTop();&#34;</span><span class="p">&gt;&lt;</span><span class="nt">strong</span><span class="p">&gt;</span>返回顶部<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">onscroll</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">();</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o">&gt;</span> <span class="mi">180</span><span class="p">){</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.divT&#34;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span> <span class="p">{</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.divT&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">};</span>

        <span class="kd">function</span> <span class="nx">ReturnTop</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="2左侧菜单">2.左侧菜单</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
          <span class="p">.</span><span class="nc">menu</span><span class="p">{</span>
              <span class="k">height</span><span class="p">:</span> <span class="mi">600</span><span class="kt">px</span><span class="p">;</span>
              <span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">%</span><span class="p">;</span>
              <span class="k">background-color</span><span class="p">:</span> <span class="mh">#2F4F4F</span><span class="p">;</span>
              <span class="k">float</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
          <span class="p">}</span>
         <span class="p">.</span><span class="nc">title</span><span class="p">{</span>
             <span class="k">line-height</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span>
             <span class="k">color</span><span class="p">:</span> <span class="mh">#ddd</span><span class="p">;</span>
         <span class="p">}</span>
         <span class="p">.</span><span class="nc">title</span><span class="p">:</span><span class="nd">hover</span><span class="p">{</span>
             <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span>
             <span class="k">color</span><span class="p">:</span> <span class="kc">lightcyan</span><span class="p">;</span>
             <span class="k">font-size</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
         <span class="p">}</span>
         <span class="p">.</span><span class="nc">hide</span><span class="p">{</span>
             <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
         <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;outer&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Show(this);&#34;</span><span class="p">&gt;</span>菜单一<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;con&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>111<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>111<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>111<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Show(this);&#34;</span><span class="p">&gt;</span>菜单二<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;con hide&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>222<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>222<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>222<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Show(this);&#34;</span><span class="p">&gt;</span>菜单三<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;con hide&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>333<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>333<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>333<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">function</span> <span class="nx">Show</span><span class="p">(</span><span class="nx">self</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">self</span><span class="p">).</span><span class="nx">next</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">children</span><span class="p">(</span><span class="s2">&#34;.con&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="3菜单切换">3.菜单切换</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span><span class="lnt">69
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="o">*</span><span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">tab_outer</span><span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="kt">px</span> <span class="kc">auto</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">60</span><span class="kt">%</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">menu</span><span class="p">{</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#cccccc</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ccc</span><span class="p">;</span>
            <span class="k">line-height</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">menu</span> <span class="nt">li</span><span class="p">{</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">menu</span> <span class="nt">li</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span>
            <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">menu</span> <span class="nt">a</span><span class="p">{</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">11</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">content</span><span class="p">{</span>
            <span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ccc</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">300</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">font-size</span><span class="p">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">hide</span><span class="p">{</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="p">.</span><span class="nc">current</span><span class="p">{</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#0099dd</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;tab_outer&#34;</span><span class="p">&gt;</span>
          <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu&#34;</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">li</span> <span class="na">xxx</span><span class="o">=</span><span class="s">&#34;c1&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;current&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Tab(this);&#34;</span><span class="p">&gt;</span>菜单一<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">li</span> <span class="na">xxx</span><span class="o">=</span><span class="s">&#34;c2&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Tab(this);&#34;</span><span class="p">&gt;</span>菜单二<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">li</span> <span class="na">xxx</span><span class="o">=</span><span class="s">&#34;c3&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Tab(this);&#34;</span><span class="p">&gt;</span>菜单三<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
          <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
          <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;content&#34;</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;c1&#34;</span><span class="p">&gt;</span>内容一<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;c2&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hide&#34;</span><span class="p">&gt;</span>内容二<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;c3&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;hide&#34;</span><span class="p">&gt;</span>内容三<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
          <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">function</span> <span class="nx">Tab</span><span class="p">(</span><span class="nx">self</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">self</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;current&#34;</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;current&#34;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="s2">&#34;#&#34;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="nx">self</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;xxx&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">x</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="4滚动菜单">4.滚动菜单</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="nt">body</span><span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#dddddd</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">w</span><span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="kc">auto</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">980</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">pg-header</span><span class="p">{</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">48</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">pg-body</span> <span class="p">.</span><span class="nc">menu</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">180</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
            <span class="k">float</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nt">li</span> <span class="p">{</span>
            <span class="k">list-style-type</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">pg-body</span> <span class="p">.</span><span class="nc">menu</span> <span class="p">.</span><span class="nc">active</span><span class="p">{</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#425a66</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">pg-body</span> <span class="p">.</span><span class="nc">fixed</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">pg-body</span> <span class="p">.</span><span class="nc">content</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">385</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">right</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
            <span class="k">float</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">pg-body</span> <span class="p">.</span><span class="nc">content</span> <span class="p">.</span><span class="nc">item</span><span class="p">{</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">900</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pg-header&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;w&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pg-body&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;menu&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">menu</span><span class="o">=</span><span class="s">&#34;funcOne&#34;</span><span class="p">&gt;</span>第一章<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">menu</span><span class="o">=</span><span class="s">&#34;funcTwo&#34;</span><span class="p">&gt;</span>第二章<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">menu</span><span class="o">=</span><span class="s">&#34;funcStree&#34;</span><span class="p">&gt;</span>第三章<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;content&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;content&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span> <span class="na">con</span><span class="o">=</span><span class="s">&#34;funcOne&#34;</span><span class="p">&gt;</span>床前明月管<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span> <span class="na">con</span><span class="o">=</span><span class="s">&#34;funcTwo&#34;</span><span class="p">&gt;</span>疑是地上霜<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item&#34;</span> <span class="na">con</span><span class="o">=</span><span class="s">&#34;funcStree&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;height: 100px&#34;</span><span class="p">&gt;</span>我是郭德纲<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">onscroll</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">onTop</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">();</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">onTop</span> <span class="o">&gt;=</span> <span class="mi">48</span><span class="p">){</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#menu&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;fixed&#34;</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span> <span class="p">{</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#menu&#34;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;fixed&#34;</span><span class="p">);</span>
            <span class="p">}</span>

            <span class="kd">var</span> <span class="nx">flag</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.item&#34;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">topH</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">HH</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">height</span><span class="p">()</span> <span class="o">+</span> <span class="nx">topH</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">wH</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">height</span><span class="p">();</span>

                <span class="k">if</span> <span class="p">((</span><span class="nx">wH</span> <span class="o">+</span> <span class="nx">onTop</span><span class="p">)</span> <span class="o">==</span> <span class="nx">HH</span><span class="p">){</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;ul .active&#34;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;li:last&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>
                    <span class="nx">flag</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
                    <span class="k">return</span>
                <span class="p">}</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">flag</span><span class="p">){</span>
                    <span class="k">return</span>
                <span class="p">}</span>

                <span class="kd">var</span> <span class="nx">menuCon</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;con&#34;</span><span class="p">);</span>
                <span class="k">if</span> <span class="p">((</span><span class="nx">topH</span> <span class="o">&lt;</span> <span class="nx">onTop</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">onTop</span> <span class="o">&lt;</span> <span class="nx">HH</span><span class="p">)){</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;ul [menu=&#39;&#34;</span> <span class="o">+</span> <span class="nx">menuCon</span> <span class="o">+</span><span class="s2">&#34;&#39;]&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>
                <span class="p">}</span><span class="k">else</span> <span class="p">{</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;ul [menu=&#39;&#34;</span> <span class="o">+</span> <span class="nx">menuCon</span> <span class="o">+</span><span class="s2">&#34;&#39;]&#34;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">})</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="5淡入淡出">5.淡入淡出</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;in&#34;</span><span class="p">&gt;</span>fadein<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;out&#34;</span><span class="p">&gt;</span>fadeout<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;toggle&#34;</span><span class="p">&gt;</span>fadetoggle<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;fadeto&#34;</span><span class="p">&gt;</span>fadeto<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>

      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;id1&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;display:none; width: 80px;height: 80px;background-color: blueviolet&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;id2&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;display:none; width: 80px;height: 80px;background-color: orangered &#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;id3&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;display:none; width: 80px;height: 80px;background-color: darkgreen &#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#in&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id1&#34;</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id2&#34;</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id3&#34;</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>

            <span class="p">});</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#out&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id1&#34;</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id2&#34;</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id3&#34;</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>

            <span class="p">});</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#toggle&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id1&#34;</span><span class="p">).</span><span class="nx">fadeToggle</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id2&#34;</span><span class="p">).</span><span class="nx">fadeToggle</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id3&#34;</span><span class="p">).</span><span class="nx">fadeToggle</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>

            <span class="p">});</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#fadeto&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id1&#34;</span><span class="p">).</span><span class="nx">fadeTo</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span><span class="mf">0.4</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id2&#34;</span><span class="p">).</span><span class="nx">fadeTo</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span><span class="mf">0.5</span><span class="p">);</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#id3&#34;</span><span class="p">).</span><span class="nx">fadeTo</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
            <span class="p">});</span>
        <span class="p">});</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="6滑动">6.滑动</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">#</span><span class="nn">flipshow</span><span class="o">,</span><span class="p">#</span><span class="nn">content</span><span class="o">,</span><span class="p">#</span><span class="nn">fliphide</span><span class="o">,</span><span class="p">#</span><span class="nn">toggle</span><span class="p">{</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">blueviolet</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span><span class="kc">solid</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">red</span><span class="p">;</span>

        <span class="p">}</span>
        <span class="p">#</span><span class="nn">content</span><span class="p">{</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;flipshow&#34;</span><span class="p">&gt;</span>出现<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;fliphide&#34;</span><span class="p">&gt;</span>隐藏<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;toggle&#34;</span><span class="p">&gt;</span>toggle<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;content&#34;</span><span class="p">&gt;</span>helloworld<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
              <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#flipshow&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
                 <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#content&#34;</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
              <span class="p">});</span>
              <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#fliphide&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
                 <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#content&#34;</span><span class="p">).</span><span class="nx">slideUp</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
              <span class="p">});</span>
              <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#toggle&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
                 <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#content&#34;</span><span class="p">).</span><span class="nx">slideToggle</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
              <span class="p">})</span>
          <span class="p">});</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="7隐藏与显示">7.隐藏与显示</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="c">&lt;!--1 隐藏与显示--&gt;</span>
    <span class="c">&lt;!--2 淡入淡出--&gt;</span>
    <span class="c">&lt;!--3 滑动--&gt;</span>
    <span class="c">&lt;!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事--&gt;</span>

    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>hello<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;hide&#34;</span><span class="p">&gt;</span>隐藏<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;show&#34;</span><span class="p">&gt;</span>显示<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">button</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;toggle&#34;</span><span class="p">&gt;</span>隐藏/显示<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#hide&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">hide</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
            <span class="p">});</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#show&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">show</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
            <span class="p">});</span>

        <span class="c1">//用于切换被选元素的 hide() 与 show() 方法。
</span><span class="c1"></span>            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#toggle&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;p&#34;</span><span class="p">).</span><span class="nx">toggle</span><span class="p">(</span><span class="mi">2000</span><span class="p">);</span>
            <span class="p">});</span>
        <span class="p">});</span>

    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="8添加与删除标签">8.添加与删除标签</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;outer&#34;</span><span class="p">&gt;</span>
           <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;section&#34;</span><span class="p">&gt;</span>
               <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;icons&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;display: inline-block&#34;</span><span class="p">&gt;</span>
                   <span class="p">&lt;</span><span class="nt">a</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Add(this);&#34;</span><span class="p">&gt;&lt;</span><span class="nt">button</span><span class="p">&gt;</span>+<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
               <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
               <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;inputs&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;display: inline-block&#34;</span><span class="p">&gt;</span>
                   <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span><span class="p">&gt;</span>
                   <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;IP&#34;</span><span class="p">&gt;</span>
               <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
           <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
       <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kd">function</span> <span class="nx">Add</span><span class="p">(</span><span class="nx">self</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">self</span><span class="p">).</span><span class="nx">parentsUntil</span><span class="p">(</span><span class="s2">&#34;outer&#34;</span><span class="p">).</span><span class="nx">clone</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;a&#34;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&#34;&lt;button&gt;-&lt;/button&gt;&#34;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;onclick&#34;</span><span class="p">,</span><span class="s2">&#34;Remove(this);&#34;</span><span class="p">).</span><span class="nx">end</span><span class="p">().</span><span class="nx">eq</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="s2">&#34;.outer&#34;</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="kd">function</span> <span class="nx">Remove</span><span class="p">(</span><span class="nx">self</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">self</span><span class="p">).</span><span class="nx">parentsUntil</span><span class="p">(</span><span class="s2">&#34;outer&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="9商城商品放大镜">9.商城商品放大镜</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span><span class="lnt">108
</span><span class="lnt">109
</span><span class="lnt">110
</span><span class="lnt">111
</span><span class="lnt">112
</span><span class="lnt">113
</span><span class="lnt">114
</span><span class="lnt">115
</span><span class="lnt">116
</span><span class="lnt">117
</span><span class="lnt">118
</span><span class="lnt">119
</span><span class="lnt">120
</span><span class="lnt">121
</span><span class="lnt">122
</span><span class="lnt">123
</span><span class="lnt">124
</span><span class="lnt">125
</span><span class="lnt">126
</span><span class="lnt">127
</span><span class="lnt">128
</span><span class="lnt">129
</span><span class="lnt">130
</span><span class="lnt">131
</span><span class="lnt">132
</span><span class="lnt">133
</span><span class="lnt">134
</span><span class="lnt">135
</span><span class="lnt">136
</span><span class="lnt">137
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&#34;Content-Type&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;text/html; charset=UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&#34;X-UA-Compatible&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;IE=8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>购物商城<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
            <span class="o">*</span><span class="p">{</span>
                <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
                <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="p">.</span><span class="nc">outer</span><span class="p">{</span>
                <span class="k">position</span><span class="p">:</span><span class="kc">relative</span><span class="p">;</span>
                <span class="k">width</span><span class="p">:</span><span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">height</span><span class="p">:</span><span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">border</span><span class="p">:</span><span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">black</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="p">.</span><span class="nc">outer</span> <span class="p">.</span><span class="nc">small-box</span><span class="p">{</span>
                <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span>
                <span class="k">z-index</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="p">.</span><span class="nc">outer</span> <span class="p">.</span><span class="nc">small-box</span> <span class="p">.</span><span class="nc">mark</span><span class="p">{</span>
                <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
                <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
                <span class="k">width</span><span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">height</span><span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">background-color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
                <span class="k">filter</span><span class="p">:</span> <span class="nf">alpha</span><span class="p">(</span><span class="n">opacity</span><span class="err">=</span><span class="mi">0</span><span class="p">);</span>
                <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
                <span class="k">z-index</span><span class="p">:</span> <span class="mi">10</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="p">.</span><span class="nc">outer</span> <span class="p">.</span><span class="nc">small-box</span> <span class="p">.</span><span class="nc">float-box</span><span class="p">{</span>
                <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
                <span class="k">width</span><span class="p">:</span> <span class="mi">175</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">height</span><span class="p">:</span> <span class="mi">175</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
                <span class="k">background</span><span class="p">:</span> <span class="mh">#DAEEFC</span><span class="p">;</span>
                <span class="k">filter</span><span class="p">:</span> <span class="nf">alpha</span><span class="p">(</span><span class="n">opacity</span><span class="err">=</span><span class="mi">40</span><span class="p">);</span>
                <span class="k">opacity</span><span class="p">:</span> <span class="mf">0.4</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="p">.</span><span class="nc">outer</span> <span class="p">.</span><span class="nc">big-box</span><span class="p">{</span>
                <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
                <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
                <span class="k">left</span><span class="p">:</span> <span class="mi">351</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">width</span><span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">height</span><span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
                <span class="k">overflow</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
                <span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">transparent</span><span class="p">;</span>
                <span class="k">z-index</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="p">.</span><span class="nc">outer</span> <span class="p">.</span><span class="nc">big-box</span> <span class="nt">img</span><span class="p">{</span>
                <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
                <span class="k">z-index</span><span class="p">:</span> <span class="mi">5</span>
            <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span>  <span class="na">class</span><span class="o">=</span><span class="s">&#34;outer&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span>  <span class="na">class</span><span class="o">=</span><span class="s">&#34;small-box&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span>  <span class="na">class</span><span class="o">=</span><span class="s">&#34;mark&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span>  <span class="na">class</span><span class="o">=</span><span class="s">&#34;float-box&#34;</span> <span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">img</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;350&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;350&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../css/1.jpg&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;big-box&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">img</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;900px&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;900px&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../css/1.jpg&#34;</span> <span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>


<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
   <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
        <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.mark&#34;</span><span class="p">).</span><span class="nx">mouseover</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.float-box&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;display&#34;</span><span class="p">,</span><span class="s2">&#34;block&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;display&#34;</span><span class="p">,</span><span class="s2">&#34;block&#34;</span><span class="p">);</span>
        <span class="p">});</span>

        <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.mark&#34;</span><span class="p">).</span><span class="nx">mouseout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.float-box&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;display&#34;</span><span class="p">,</span><span class="s2">&#34;none&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;display&#34;</span><span class="p">,</span><span class="s2">&#34;none&#34;</span><span class="p">);</span>
        <span class="p">});</span>



        <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.mark&#34;</span><span class="p">).</span><span class="nx">mousemove</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

            <span class="kd">var</span> <span class="nx">_event</span> <span class="o">=</span> <span class="nx">e</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>  <span class="c1">//兼容多个浏览器的event参数模式
</span><span class="c1"></span>
            <span class="kd">var</span> <span class="nx">float_box_width</span>  <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.float-box&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">float_box_height</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.float-box&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetHeight</span><span class="p">;</span><span class="c1">//175,175
</span><span class="c1"></span>

            <span class="kd">var</span> <span class="nx">float_box_width_half</span>  <span class="o">=</span>  <span class="nx">float_box_width</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">float_box_height_half</span> <span class="o">=</span>  <span class="nx">float_box_height</span><span class="o">/</span> <span class="mi">2</span><span class="p">;</span><span class="c1">//87.5,87.5
</span><span class="c1"></span>

            <span class="kd">var</span> <span class="nx">small_box_width</span>  <span class="o">=</span>  <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.outer&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">small_box_height</span> <span class="o">=</span>  <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.outer&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetHeight</span><span class="p">;</span><span class="c1">//360,360
</span><span class="c1"></span>

            <span class="kd">var</span> <span class="nx">mouse_left</span> <span class="o">=</span> <span class="nx">_event</span><span class="p">.</span><span class="nx">clientX</span>   <span class="o">-</span> <span class="nx">float_box_width_half</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">mouse_top</span> <span class="o">=</span> <span class="nx">_event</span><span class="p">.</span><span class="nx">clientY</span>  <span class="o">-</span> <span class="nx">float_box_height_half</span><span class="p">;</span>


            <span class="k">if</span> <span class="p">(</span><span class="nx">mouse_left</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">mouse_left</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">mouse_left</span> <span class="o">&gt;</span> <span class="nx">small_box_width</span> <span class="o">-</span> <span class="nx">float_box_width</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">mouse_left</span> <span class="o">=</span> <span class="nx">small_box_width</span> <span class="o">-</span> <span class="nx">float_box_width</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">mouse_top</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">mouse_top</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">mouse_top</span> <span class="o">&gt;</span> <span class="nx">small_box_height</span> <span class="o">-</span> <span class="nx">float_box_height</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">mouse_top</span> <span class="o">=</span> <span class="nx">small_box_height</span> <span class="o">-</span> <span class="nx">float_box_height</span><span class="p">;</span>
            <span class="p">}</span>

            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.float-box&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;left&#34;</span><span class="p">,</span><span class="nx">mouse_left</span> <span class="o">+</span> <span class="s2">&#34;px&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.float-box&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;top&#34;</span><span class="p">,</span><span class="nx">mouse_top</span> <span class="o">+</span> <span class="s2">&#34;px&#34;</span><span class="p">);</span>
            
            
            <span class="kd">var</span> <span class="nx">percentX</span> <span class="o">=</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box img&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span> <span class="o">-</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">)</span> <span class="o">/</span> <span class="p">(</span><span class="nx">small_box_width</span> <span class="o">-</span> <span class="nx">float_box_width</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">percentY</span> <span class="o">=</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box img&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetHeight</span> <span class="o">-</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetHeight</span><span class="p">)</span> <span class="o">/</span> <span class="p">(</span><span class="nx">small_box_height</span> <span class="o">-</span> <span class="nx">float_box_height</span><span class="p">);</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box img&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">,</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box&#34;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">,</span><span class="nx">small_box_width</span><span class="p">,</span><span class="nx">float_box_width</span><span class="p">)</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">percentX</span><span class="p">,</span><span class="nx">percentY</span><span class="p">)</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box img&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;left&#34;</span><span class="p">,</span><span class="o">-</span><span class="nx">percentX</span> <span class="o">*</span> <span class="nx">mouse_left</span> <span class="o">+</span> <span class="s2">&#34;px&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.big-box img&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;top&#34;</span><span class="p">,</span><span class="o">-</span><span class="nx">percentY</span> <span class="o">*</span> <span class="nx">mouse_top</span> <span class="o">+</span> <span class="s2">&#34;px&#34;</span><span class="p">)</span>

        <span class="p">})</span>
   <span class="p">})</span>

<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="10商城菜单">10.商城菜单</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span><span class="lnt">108
</span><span class="lnt">109
</span><span class="lnt">110
</span><span class="lnt">111
</span><span class="lnt">112
</span><span class="lnt">113
</span><span class="lnt">114
</span><span class="lnt">115
</span><span class="lnt">116
</span><span class="lnt">117
</span><span class="lnt">118
</span><span class="lnt">119
</span><span class="lnt">120
</span><span class="lnt">121
</span><span class="lnt">122
</span><span class="lnt">123
</span><span class="lnt">124
</span><span class="lnt">125
</span><span class="lnt">126
</span><span class="lnt">127
</span><span class="lnt">128
</span><span class="lnt">129
</span><span class="lnt">130
</span><span class="lnt">131
</span><span class="lnt">132
</span><span class="lnt">133
</span><span class="lnt">134
</span><span class="lnt">135
</span><span class="lnt">136
</span><span class="lnt">137
</span><span class="lnt">138
</span><span class="lnt">139
</span><span class="lnt">140
</span><span class="lnt">141
</span><span class="lnt">142
</span><span class="lnt">143
</span><span class="lnt">144
</span><span class="lnt">145
</span><span class="lnt">146
</span><span class="lnt">147
</span><span class="lnt">148
</span><span class="lnt">149
</span><span class="lnt">150
</span><span class="lnt">151
</span><span class="lnt">152
</span><span class="lnt">153
</span><span class="lnt">154
</span><span class="lnt">155
</span><span class="lnt">156
</span><span class="lnt">157
</span><span class="lnt">158
</span><span class="lnt">159
</span><span class="lnt">160
</span><span class="lnt">161
</span><span class="lnt">162
</span><span class="lnt">163
</span><span class="lnt">164
</span><span class="lnt">165
</span><span class="lnt">166
</span><span class="lnt">167
</span><span class="lnt">168
</span><span class="lnt">169
</span><span class="lnt">170
</span><span class="lnt">171
</span><span class="lnt">172
</span><span class="lnt">173
</span><span class="lnt">174
</span><span class="lnt">175
</span><span class="lnt">176
</span><span class="lnt">177
</span><span class="lnt">178
</span><span class="lnt">179
</span><span class="lnt">180
</span><span class="lnt">181
</span><span class="lnt">182
</span><span class="lnt">183
</span><span class="lnt">184
</span><span class="lnt">185
</span><span class="lnt">186
</span><span class="lnt">187
</span><span class="lnt">188
</span><span class="lnt">189
</span><span class="lnt">190
</span><span class="lnt">191
</span><span class="lnt">192
</span><span class="lnt">193
</span><span class="lnt">194
</span><span class="lnt">195
</span><span class="lnt">196
</span><span class="lnt">197
</span><span class="lnt">198
</span><span class="lnt">199
</span><span class="lnt">200
</span><span class="lnt">201
</span><span class="lnt">202
</span><span class="lnt">203
</span><span class="lnt">204
</span><span class="lnt">205
</span><span class="lnt">206
</span><span class="lnt">207
</span><span class="lnt">208
</span><span class="lnt">209
</span><span class="lnt">210
</span><span class="lnt">211
</span><span class="lnt">212
</span><span class="lnt">213
</span><span class="lnt">214
</span><span class="lnt">215
</span><span class="lnt">216
</span><span class="lnt">217
</span><span class="lnt">218
</span><span class="lnt">219
</span><span class="lnt">220
</span><span class="lnt">221
</span><span class="lnt">222
</span><span class="lnt">223
</span><span class="lnt">224
</span><span class="lnt">225
</span><span class="lnt">226
</span><span class="lnt">227
</span><span class="lnt">228
</span><span class="lnt">229
</span><span class="lnt">230
</span><span class="lnt">231
</span><span class="lnt">232
</span><span class="lnt">233
</span><span class="lnt">234
</span><span class="lnt">235
</span><span class="lnt">236
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="o">*</span><span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">hide</span><span class="p">{</span>
            <span class="k">display</span><span class="p">:</span><span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-nav</span> <span class="p">{</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">39</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">background</span><span class="p">:</span> <span class="mh">#c9033b</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-nav</span> <span class="p">.</span><span class="nc">bg</span><span class="p">{</span>
            <span class="k">background</span><span class="p">:</span> <span class="mh">#c9033b</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-nav</span> <span class="p">.</span><span class="nc">nav-allgoods</span> <span class="p">.</span><span class="nc">menuEvent</span> <span class="p">{</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">39</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">line-height</span><span class="p">:</span> <span class="mi">39</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">text-decoration</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
            <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
            <span class="k">font-weight</span><span class="p">:</span> <span class="kc">bold</span><span class="p">;</span>
            <span class="k">font-family</span><span class="p">:</span> <span class="err">微软雅黑</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-nav</span> <span class="p">.</span><span class="nc">nav-allgoods</span> <span class="p">.</span><span class="nc">menuEvent</span> <span class="p">.</span><span class="nc">catName</span> <span class="p">{</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">39</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">line-height</span><span class="p">:</span> <span class="mi">39</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">font-size</span><span class="p">:</span> <span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-nav</span> <span class="p">.</span><span class="nc">nav-allmenu</span> <span class="nt">a</span> <span class="p">{</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">39</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">vertical-align</span><span class="p">:</span> <span class="kc">top</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">15</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">text-decoration</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
            <span class="k">float</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-menu</span> <span class="nt">a</span><span class="p">{</span>
            <span class="k">color</span><span class="p">:</span><span class="mh">#656565</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-menu</span> <span class="p">.</span><span class="nc">menu-catagory</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
            <span class="k">border-left</span><span class="p">:</span><span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#fff</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">316</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">230</span><span class="kt">px</span><span class="p">;</span>
             <span class="k">z-index</span><span class="p">:</span> <span class="mi">4</span><span class="p">;</span>
             <span class="k">float</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-menu</span> <span class="p">.</span><span class="nc">menu-catagory</span> <span class="p">.</span><span class="nc">catagory</span> <span class="p">{</span>
            <span class="k">border-left</span><span class="p">:</span><span class="mi">4</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#fff</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">104</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">border-bottom</span><span class="p">:</span> <span class="kc">solid</span> <span class="mi">1</span><span class="kt">px</span> <span class="mh">#eaeaea</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-menu</span> <span class="p">.</span><span class="nc">menu-catagory</span> <span class="p">.</span><span class="nc">catagory</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">102</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">border-left</span><span class="p">:</span><span class="mi">4</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#c9033b</span><span class="p">;</span>
            <span class="k">border-bottom</span><span class="p">:</span> <span class="kc">solid</span> <span class="mi">1</span><span class="kt">px</span> <span class="mh">#bcbcbc</span><span class="p">;</span>
            <span class="k">border-top</span><span class="p">:</span> <span class="kc">solid</span> <span class="mi">1</span><span class="kt">px</span> <span class="mh">#bcbcbc</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">header-menu</span> <span class="p">.</span><span class="nc">menu-content</span> <span class="p">.</span><span class="nc">item</span><span class="p">{</span>
            <span class="k">margin-left</span><span class="p">:</span><span class="mi">230</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">position</span><span class="p">:</span><span class="kc">absolute</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span><span class="kc">white</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span><span class="mi">314</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span><span class="mi">500</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">z-index</span><span class="p">:</span><span class="mi">4</span><span class="p">;</span>
            <span class="k">float</span><span class="p">:</span><span class="kc">left</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span> <span class="kc">solid</span> <span class="mi">1</span><span class="kt">px</span> <span class="mh">#bcbcbc</span><span class="p">;</span>
            <span class="k">border-left</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">box-shadow</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="mh">#999</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;pg-header&#34;</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;header-nav&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;container narrow bg&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;nav-allgoods left&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">a</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;all_menu_catagory&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menuEvent&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">b</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;catName&#34;</span><span class="p">&gt;</span>全部商品分类<span class="p">&lt;/</span><span class="nt">b</span><span class="p">&gt;</span>&gt;
                    <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;arrow&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;display: inline-block;vertical-align: top;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;header-menu&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;container narrow hide&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;nav_all_menu&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu-catagory&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;catagory&#34;</span> <span class="na">float-content</span><span class="o">=</span><span class="s">&#34;one&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span><span class="p">&gt;</span>家电<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>空调<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;catagory&#34;</span> <span class="na">float-content</span><span class="o">=</span><span class="s">&#34;two&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span><span class="p">&gt;</span>床上用品<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;http://www.baidu.com&#34;</span><span class="p">&gt;</span>床单<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;catagory&#34;</span> <span class="na">float-content</span><span class="o">=</span><span class="s">&#34;three&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;title&#34;</span><span class="p">&gt;</span>水果<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;body&#34;</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>橘子<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;nav_all_content&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;menu-content&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item hide&#34;</span> <span class="na">float-id</span><span class="o">=</span><span class="s">&#34;one&#34;</span><span class="p">&gt;</span>

                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>厨房用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;勺子&#34;</span><span class="p">&gt;</span>勺子<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>厨房用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;菜刀&#34;</span><span class="p">&gt;</span>菜刀<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>厨房用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;</span>菜板<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>厨房用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;碗&#34;</span><span class="p">&gt;</span>碗<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>

                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item hide&#34;</span> <span class="na">float-id</span><span class="o">=</span><span class="s">&#34;two&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>床上用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;</span>枕头<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>床上用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;角阀&#34;</span><span class="p">&gt;</span>夏凉被<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>床上用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;角阀&#34;</span><span class="p">&gt;</span>嘿嘿嘿<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;item hide&#34;</span> <span class="na">float-id</span><span class="o">=</span><span class="s">&#34;three&#34;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>厨房用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;角阀&#34;</span><span class="p">&gt;</span>微波炉<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">dl</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dt</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;red&#34;</span><span class="p">&gt;</span>厨房用品<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">dt</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">dd</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>| <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;http://www.meilele.com/category-jiaofa&#34;</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;_blank&#34;</span> <span class="na">title</span><span class="o">=</span><span class="s">&#34;角阀&#34;</span><span class="p">&gt;</span>金菜刀<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>

                        <span class="p">&lt;/</span><span class="nt">dd</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">dl</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="nx">Change</span><span class="p">(</span><span class="s2">&#34;#all_menu_catagory&#34;</span><span class="p">,</span><span class="s2">&#34;#nav_all_menu&#34;</span><span class="p">,</span><span class="s2">&#34;#nav_all_content&#34;</span><span class="p">)</span>
    <span class="p">});</span>

    <span class="kd">function</span> <span class="nx">Change</span><span class="p">(</span><span class="nx">menuF</span><span class="p">,</span><span class="nx">menuS</span><span class="p">,</span><span class="nx">menuT</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">menuF</span><span class="p">).</span><span class="nx">bind</span><span class="p">({</span>
            <span class="s2">&#34;mouseover&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
        <span class="p">},</span><span class="s2">&#34;mouseout&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="p">});</span>

        <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">bind</span><span class="p">({</span>
            <span class="s2">&#34;mouseover&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
                <span class="kd">var</span> <span class="nx">$item</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">menuT</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;[float-id=&#34;&#39;</span> <span class="o">+</span>　<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;float-content&#34;</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;&#34;]&#39;</span><span class="p">);</span>
                <span class="nx">$item</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="p">},</span>
            <span class="s2">&#34;mouseout&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
                <span class="nx">$</span><span class="p">(</span><span class="nx">menuT</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">});</span>
        
        <span class="nx">$</span><span class="p">(</span><span class="nx">menuT</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">bind</span><span class="p">({</span>
            <span class="s2">&#34;mouseover&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="p">},</span>
            <span class="s2">&#34;mouseout&#34;</span><span class="o">:</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="nx">$</span><span class="p">(</span><span class="nx">menuS</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">})</span>
    <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="11拖动面板">11.拖动面板</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;border: 1px solid #ddd;width: 600px;position: absolute;&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;title&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;background-color: black;height: 40px;color: white;&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span>标题<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;height: 300px;&#34;</span><span class="p">&gt;</span>
            内容
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#title&#39;</span><span class="p">).</span><span class="nx">mouseover</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;cursor&#39;</span><span class="p">,</span><span class="s1">&#39;move&#39;</span><span class="p">);</span>
        <span class="p">}).</span><span class="nx">mousedown</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">_event</span> <span class="o">=</span> <span class="nx">e</span> <span class="o">||</span> <span class="nx">widows</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">ord_x</span> <span class="o">=</span> <span class="nx">_event</span><span class="p">.</span><span class="nx">clientX</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">ord_y</span> <span class="o">=</span> <span class="nx">_event</span><span class="p">.</span><span class="nx">clientY</span><span class="p">;</span>

            <span class="kd">var</span> <span class="nx">parent_left</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">offset</span><span class="p">().</span><span class="nx">left</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">parent_top</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span><span class="p">;</span>

            <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">,</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">_new_event</span> <span class="o">=</span> <span class="nx">e</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">new_x</span> <span class="o">=</span> <span class="nx">_new_event</span><span class="p">.</span><span class="nx">clientX</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">new_y</span> <span class="o">=</span> <span class="nx">_new_event</span><span class="p">.</span><span class="nx">clientY</span><span class="p">;</span>

                <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">parent_left</span> <span class="o">+</span> <span class="p">(</span><span class="nx">new_x</span> <span class="o">-</span> <span class="nx">ord_x</span><span class="p">);</span>
                <span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">parent_top</span> <span class="o">+</span> <span class="p">(</span><span class="nx">new_y</span> <span class="o">-</span> <span class="nx">ord_y</span><span class="p">);</span>

                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;left&#39;</span><span class="p">,</span><span class="nx">x</span><span class="o">+</span><span class="s1">&#39;px&#39;</span><span class="p">);</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;top&#39;</span><span class="p">,</span><span class="nx">y</span><span class="o">+</span><span class="s1">&#39;px&#39;</span><span class="p">);</span>
            <span class="p">})</span>
        <span class="p">}).</span><span class="nx">mouseup</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s1">&#39;mousemove&#39;</span><span class="p">);</span>
        <span class="p">});</span>
    <span class="p">})</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="12模态对话框">12.模态对话框</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span><span class="lnt">108
</span><span class="lnt">109
</span><span class="lnt">110
</span><span class="lnt">111
</span><span class="lnt">112
</span><span class="lnt">113
</span><span class="lnt">114
</span><span class="lnt">115
</span><span class="lnt">116
</span><span class="lnt">117
</span><span class="lnt">118
</span><span class="lnt">119
</span><span class="lnt">120
</span><span class="lnt">121
</span><span class="lnt">122
</span><span class="lnt">123
</span><span class="lnt">124
</span><span class="lnt">125
</span><span class="lnt">126
</span><span class="lnt">127
</span><span class="lnt">128
</span><span class="lnt">129
</span><span class="lnt">130
</span><span class="lnt">131
</span><span class="lnt">132
</span><span class="lnt">133
</span><span class="lnt">134
</span><span class="lnt">135
</span><span class="lnt">136
</span><span class="lnt">137
</span><span class="lnt">138
</span><span class="lnt">139
</span><span class="lnt">140
</span><span class="lnt">141
</span><span class="lnt">142
</span><span class="lnt">143
</span><span class="lnt">144
</span><span class="lnt">145
</span><span class="lnt">146
</span><span class="lnt">147
</span><span class="lnt">148
</span><span class="lnt">149
</span><span class="lnt">150
</span><span class="lnt">151
</span><span class="lnt">152
</span><span class="lnt">153
</span><span class="lnt">154
</span><span class="lnt">155
</span><span class="lnt">156
</span><span class="lnt">157
</span><span class="lnt">158
</span><span class="lnt">159
</span><span class="lnt">160
</span><span class="lnt">161
</span><span class="lnt">162
</span><span class="lnt">163
</span><span class="lnt">164
</span><span class="lnt">165
</span><span class="lnt">166
</span><span class="lnt">167
</span><span class="lnt">168
</span><span class="lnt">169
</span><span class="lnt">170
</span><span class="lnt">171
</span><span class="lnt">172
</span><span class="lnt">173
</span><span class="lnt">174
</span><span class="lnt">175
</span><span class="lnt">176
</span><span class="lnt">177
</span><span class="lnt">178
</span><span class="lnt">179
</span><span class="lnt">180
</span><span class="lnt">181
</span><span class="lnt">182
</span><span class="lnt">183
</span><span class="lnt">184
</span><span class="lnt">185
</span><span class="lnt">186
</span><span class="lnt">187
</span><span class="lnt">188
</span><span class="lnt">189
</span><span class="lnt">190
</span><span class="lnt">191
</span><span class="lnt">192
</span><span class="lnt">193
</span><span class="lnt">194
</span><span class="lnt">195
</span><span class="lnt">196
</span><span class="lnt">197
</span><span class="lnt">198
</span><span class="lnt">199
</span><span class="lnt">200
</span><span class="lnt">201
</span><span class="lnt">202
</span><span class="lnt">203
</span><span class="lnt">204
</span><span class="lnt">205
</span><span class="lnt">206
</span><span class="lnt">207
</span><span class="lnt">208
</span><span class="lnt">209
</span><span class="lnt">210
</span><span class="lnt">211
</span><span class="lnt">212
</span><span class="lnt">213
</span><span class="lnt">214
</span><span class="lnt">215
</span><span class="lnt">216
</span><span class="lnt">217
</span><span class="lnt">218
</span><span class="lnt">219
</span><span class="lnt">220
</span><span class="lnt">221
</span><span class="lnt">222
</span><span class="lnt">223
</span><span class="lnt">224
</span><span class="lnt">225
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">.</span><span class="nc">shade</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">right</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">background</span><span class="p">:</span> <span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mf">.6</span><span class="p">)</span> <span class="p">;</span>
            <span class="k">z-index</span><span class="p">:</span> <span class="mi">20</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">modal</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">300</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">400</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">margin-top</span><span class="p">:</span> <span class="mi">-150</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">margin-left</span><span class="p">:</span> <span class="mi">-200</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">z-index</span><span class="p">:</span> <span class="mi">30</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ddd</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">hide</span><span class="p">{</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">modal</span> <span class="nt">form</span> <span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">fixed</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span> <span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">229</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">margin-left</span><span class="p">:</span> <span class="mi">-115</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">margin-top</span><span class="p">:</span> <span class="mi">-100</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">modal</span> <span class="nt">form</span> <span class="nt">p</span> <span class="p">{</span>
            <span class="k">float</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
            <span class="k">margin-top</span><span class="p">:</span> <span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">modal</span> <span class="nt">form</span> <span class="nt">span</span> <span class="p">{</span>
            <span class="k">float</span><span class="p">:</span> <span class="kc">right</span><span class="p">;</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">170</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#FFEBEB</span><span class="p">;</span>
            <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ffbdbe</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="mh">#e4393c</span><span class="p">;</span>
            <span class="k">font-size</span><span class="p">:</span> <span class="mi">14</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">modal</span> <span class="nt">form</span> <span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&#34;button&#34;</span><span class="o">]</span> <span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
            <span class="k">bottom</span><span class="p">:</span> <span class="mi">-30</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">115</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">modal</span> <span class="nt">form</span> <span class="o">[</span><span class="nt">value</span><span class="o">=</span><span class="s2">&#34;提交&#34;</span><span class="o">]</span><span class="p">{</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;width: 300px; margin: 0 auto&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;添加主机&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;return Add();&#34;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">table</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;border: 2px solid #F5F5F5; width: 300px;&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">thead</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">th</span> <span class="p">&gt;</span>主机名<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">th</span> <span class="p">&gt;</span>IP<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">th</span> <span class="p">&gt;</span>端口<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>操作<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">thead</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;host&#34;</span><span class="p">&gt;</span>c1.com<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;ip&#34;</span><span class="p">&gt;</span>1.1.1.1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;port&#34;</span><span class="p">&gt;</span>8888<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Edit(this);&#34;</span><span class="p">&gt;</span>Edit<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
               <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;host&#34;</span><span class="p">&gt;</span>c2.com<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;ip&#34;</span><span class="p">&gt;</span>1.1.1.1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;port&#34;</span><span class="p">&gt;</span>8888<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Edit(this);&#34;</span><span class="p">&gt;</span>Edit<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;host&#34;</span><span class="p">&gt;</span>c3.com<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;ip&#34;</span><span class="p">&gt;</span>1.1.1.1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;port&#34;</span><span class="p">&gt;</span>8888<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Edit(this);&#34;</span><span class="p">&gt;</span>Edit<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;host&#34;</span><span class="p">&gt;</span>.com<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;ip&#34;</span><span class="p">&gt;</span>1.1.1.1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">target</span><span class="o">=</span><span class="s">&#34;port&#34;</span><span class="p">&gt;</span>8888<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;Edit(this);&#34;</span><span class="p">&gt;</span>Edit<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;shade hide&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span>  <span class="na">class</span><span class="o">=</span><span class="s">&#34;modal hide&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&#34;&#34;</span> <span class="na">method</span><span class="o">=</span><span class="s">&#34;get&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>主机名:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;host&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;host&#34;</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>IP地址:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#39;ip&#39;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;ip&#34;</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>端口号:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#39;port&#39;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;port&#34;</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;提交&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;return SubmitForm();&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;取消&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;HideModal();&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
           <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr:even&#34;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;background-color&#34;</span><span class="p">,</span><span class="s2">&#34;#f5f5f5&#34;</span><span class="p">);</span>
        <span class="p">});</span>
        <span class="kd">function</span> <span class="nx">Edit</span><span class="p">(</span><span class="nx">ths</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.shade,.modal&#34;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="nx">prevList</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">ths</span><span class="p">).</span><span class="nx">prevAll</span><span class="p">();</span>
            <span class="nx">prevList</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">();</span>
                <span class="kd">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;target&#34;</span><span class="p">);</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;#&#34;</span><span class="o">+</span><span class="nx">target</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
            <span class="p">});</span>
        <span class="p">}</span>
        <span class="kd">function</span> <span class="nx">HideModal</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.shade,.modal&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.modal&#34;</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;input[type=&#39;text&#39;]&#34;</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s2">&#34;&#34;</span><span class="p">);</span>
            <span class="nx">Addd</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="kd">function</span> <span class="nx">SubmitForm</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">flag</span> <span class="o">=</span> <span class="nx">Detection</span><span class="p">();</span>

            <span class="k">try</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">Addd</span> <span class="o">&amp;&amp;</span> <span class="nx">flag</span><span class="p">){</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tbody&#34;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr&#34;</span><span class="p">).</span><span class="nx">last</span><span class="p">().</span><span class="nx">clone</span><span class="p">());</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.modal&#34;</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;input[type=&#39;text&#39;]&#34;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                        <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
                        <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;name&#34;</span><span class="p">);</span>
                        <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;tr&#34;</span><span class="p">).</span><span class="nx">last</span><span class="p">().</span><span class="nx">children</span><span class="p">()).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                            <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;target&#34;</span><span class="p">)</span> <span class="o">==</span> <span class="nx">name</span><span class="p">){</span>
                                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
                                <span class="k">return</span>
                            <span class="p">}</span>
                                <span class="p">}</span>
                        <span class="p">)});</span>
                    <span class="nx">Addd</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                    <span class="nx">HideModal</span><span class="p">();</span>
                    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span><span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">){}</span>


            <span class="k">if</span> <span class="p">(</span><span class="nx">flag</span><span class="p">){</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.modal&#34;</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;input[type=&#39;text&#39;]&#34;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                    <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
                    <span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;name&#34;</span><span class="p">);</span>
                    <span class="nx">$</span><span class="p">(</span><span class="nx">prevList</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&#34;target&#34;</span><span class="p">)</span> <span class="o">==</span> <span class="nx">name</span><span class="p">){</span>
                            <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
                            <span class="k">return</span>
                        <span class="p">}</span>
                            <span class="p">}</span>
                    <span class="p">)});</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.modal,.shade&#34;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
                    <span class="nx">HideModal</span><span class="p">();</span>
                <span class="p">}</span>
            <span class="k">return</span> <span class="nx">flag</span><span class="p">;</span>
            <span class="p">}</span>

        
        <span class="kd">function</span> <span class="nx">Detection</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">flag</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.modal&#34;</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;input[type=&#39;text&#39;]&#34;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">){</span>
                    <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">next</span><span class="p">().</span><span class="nx">next</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;visibility&#34;</span><span class="p">,</span><span class="s2">&#34;visible&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s2">&#34;亲，不能为空&#34;</span><span class="p">);</span>
                    <span class="nx">flag</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
                <span class="p">}</span><span class="k">else</span> <span class="p">{</span>
                    <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">next</span><span class="p">().</span><span class="nx">next</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;visibility&#34;</span><span class="p">,</span><span class="s2">&#34;hidden&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s2">&#34;&#34;</span><span class="p">);</span>
                <span class="p">}</span>

                <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;host&#34;</span><span class="p">){</span>
                    <span class="kd">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="sr">/(\.com)$/</span><span class="p">;</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">r</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">==</span> <span class="kc">false</span><span class="p">){</span>
                        <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">next</span><span class="p">().</span><span class="nx">next</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;visibility&#34;</span><span class="p">,</span><span class="s2">&#34;visible&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s2">&#34;主机名必须以.com结尾&#34;</span><span class="p">);</span>
                        <span class="nx">flag</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
                <span class="p">}</span>
                <span class="p">}</span><span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;ip&#34;</span><span class="p">){</span>
                    <span class="kd">var</span> <span class="nx">r2</span> <span class="o">=</span> <span class="sr">/^(([0-2]?[0-9][0-9]?)\.){3}([0-2]?[0-9][0-9]?)$/</span><span class="p">;</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">r2</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">==</span> <span class="kc">false</span><span class="p">){</span>
                        <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">next</span><span class="p">().</span><span class="nx">next</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;visibility&#34;</span><span class="p">,</span><span class="s2">&#34;visible&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s2">&#34;ip 地址格式有误&#34;</span><span class="p">);</span>
                        <span class="nx">flag</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span><span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;port&#34;</span><span class="p">){</span>
                    <span class="kd">var</span> <span class="nx">r3</span> <span class="o">=</span> <span class="sr">/^([0-9]{1,5})$/</span><span class="p">;</span>
                    <span class="k">if</span> <span class="p">((</span><span class="nx">r3</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">==</span> <span class="kc">false</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">value</span> <span class="o">&gt;</span> <span class="mi">65535</span><span class="p">)){</span>
                        <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">next</span><span class="p">().</span><span class="nx">next</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;visibility&#34;</span><span class="p">,</span><span class="s2">&#34;visible&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s2">&#34;端口必须为0-65535&#34;</span><span class="p">);</span>
                        <span class="nx">flag</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span><span class="k">else</span> <span class="p">{</span>
                    <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">next</span><span class="p">().</span><span class="nx">next</span><span class="p">().</span><span class="nx">css</span><span class="p">(</span><span class="s2">&#34;visibility&#34;</span><span class="p">,</span><span class="s2">&#34;hidden&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="s2">&#34;&#34;</span><span class="p">);</span>
                <span class="p">}</span>
        <span class="p">});</span>
        <span class="k">return</span> <span class="nx">flag</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="kd">function</span> <span class="nx">Add</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">Addd</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.shade,.modal&#34;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;hide&#34;</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="13轮播图">13.轮播图</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span><span class="lnt">108
</span><span class="lnt">109
</span><span class="lnt">110
</span><span class="lnt">111
</span><span class="lnt">112
</span><span class="lnt">113
</span><span class="lnt">114
</span><span class="lnt">115
</span><span class="lnt">116
</span><span class="lnt">117
</span><span class="lnt">118
</span><span class="lnt">119
</span><span class="lnt">120
</span><span class="lnt">121
</span><span class="lnt">122
</span><span class="lnt">123
</span><span class="lnt">124
</span><span class="lnt">125
</span><span class="lnt">126
</span><span class="lnt">127
</span><span class="lnt">128
</span><span class="lnt">129
</span><span class="lnt">130
</span><span class="lnt">131
</span><span class="lnt">132
</span><span class="lnt">133
</span><span class="lnt">134
</span><span class="lnt">135
</span><span class="lnt">136
</span><span class="lnt">137
</span><span class="lnt">138
</span><span class="lnt">139
</span><span class="lnt">140
</span><span class="lnt">141
</span><span class="lnt">142
</span><span class="lnt">143
</span><span class="lnt">144
</span><span class="lnt">145
</span><span class="lnt">146
</span><span class="lnt">147
</span><span class="lnt">148
</span><span class="lnt">149
</span><span class="lnt">150
</span><span class="lnt">151
</span><span class="lnt">152
</span><span class="lnt">153
</span><span class="lnt">154
</span><span class="lnt">155
</span><span class="lnt">156
</span><span class="lnt">157
</span><span class="lnt">158
</span><span class="lnt">159
</span><span class="lnt">160
</span><span class="lnt">161
</span><span class="lnt">162
</span><span class="lnt">163
</span><span class="lnt">164
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="o">*</span><span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nt">ul</span><span class="p">{</span>
            <span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span><span class="p">{</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">730</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">454</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">50</span><span class="kt">px</span> <span class="kc">auto</span><span class="p">;</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="p">.</span><span class="nc">img</span> <span class="nt">li</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="p">.</span><span class="nc">num</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">bottom</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
            <span class="k">font-size</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="p">.</span><span class="nc">btn</span><span class="p">{</span>
            <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span><span class="mi">50</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">margin-top</span><span class="p">:</span> <span class="mi">-30</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">30</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">aliceblue</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
            <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
            <span class="k">line-height</span><span class="p">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">font-size</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="p">.</span><span class="nc">num</span> <span class="nt">li</span><span class="p">{</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="mh">#fff</span><span class="p">;</span>
            <span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
            <span class="k">line-height</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">border-radius</span><span class="p">:</span> <span class="mi">60</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">inline</span><span class="p">;</span>
            <span class="k">font-size</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="p">.</span><span class="nc">num</span> <span class="nt">li</span><span class="p">.</span><span class="nc">active</span><span class="p">{</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">red</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="p">.</span><span class="nc">left</span><span class="p">{</span>
            <span class="k">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="p">.</span><span class="nc">right</span><span class="p">{</span>
            <span class="k">right</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span><span class="p">:</span><span class="nd">hover</span> <span class="p">.</span><span class="nc">btn</span><span class="p">{</span>
            <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
            <span class="k">font-weight</span><span class="p">:</span> <span class="mi">900</span><span class="p">;</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
            <span class="k">opacity</span><span class="p">:</span> <span class="mf">0.8</span><span class="p">;</span>
            <span class="k">cursor</span><span class="p">:</span> <span class="kc">pointer</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">out</span> <span class="nt">img</span> <span class="p">{</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;out&#34;</span><span class="p">&gt;</span>
         <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;img&#34;</span><span class="p">&gt;</span>
             <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;images/1.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
             <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;images/2.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
             <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;images/3.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
             <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;images/4.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
             <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;#&#34;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;images/5.jpg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
         <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>

         <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;num&#34;</span><span class="p">&gt;</span>
             <span class="c">&lt;!--&lt;li class=&#34;active&#34;&gt;1&lt;/li&gt;--&gt;</span>
             <span class="c">&lt;!--&lt;li&gt;2&lt;/li&gt;--&gt;</span>
             <span class="c">&lt;!--&lt;li&gt;3&lt;/li&gt;--&gt;</span>
             <span class="c">&lt;!--&lt;li&gt;4&lt;/li&gt;--&gt;</span>
             <span class="c">&lt;!--&lt;li&gt;5&lt;/li&gt;--&gt;</span>
         <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>

         <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;left btn&#34;</span><span class="p">&gt;</span><span class="err">&lt;</span><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
         <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;right btn&#34;</span><span class="p">&gt;</span>&gt;<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

     <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="kd">var</span> <span class="nx">size</span><span class="o">=</span><span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.img li&#34;</span><span class="p">).</span><span class="nx">size</span><span class="p">();</span>
            <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">1</span><span class="p">;</span><span class="nx">i</span><span class="o">&lt;=</span><span class="nx">size</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
                <span class="kd">var</span> <span class="nx">li</span><span class="o">=</span><span class="s2">&#34;&lt;li&gt;&#34;</span><span class="o">+</span><span class="nx">i</span><span class="o">+</span><span class="s2">&#34;&lt;/li&gt;&#34;</span><span class="p">;</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.num&#34;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.num li&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>


            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.num li&#34;</span><span class="p">).</span><span class="nx">mouseover</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
               <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>
               <span class="kd">var</span> <span class="nx">index</span><span class="o">=</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">index</span><span class="p">();</span>
               <span class="nx">i</span><span class="o">=</span><span class="nx">index</span><span class="p">;</span>
               <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.img li&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="nx">index</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">1000</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
            <span class="p">});</span>


        <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">t</span><span class="o">=</span><span class="nx">setInterval</span><span class="p">(</span><span class="nx">move</span><span class="p">,</span><span class="mi">1500</span><span class="p">);</span>

        <span class="kd">function</span> <span class="nx">move</span><span class="p">(){</span>
            <span class="nx">i</span><span class="o">++</span><span class="p">;</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">i</span><span class="o">==</span><span class="nx">size</span><span class="p">){</span>
                <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.num li&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="nx">i</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.img li&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="nx">i</span><span class="p">).</span><span class="nx">stop</span><span class="p">().</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">1000</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">stop</span><span class="p">().</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
        <span class="p">}</span>

        <span class="kd">function</span> <span class="nx">moveL</span><span class="p">(){</span>
            <span class="nx">i</span><span class="o">--</span><span class="p">;</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">i</span><span class="o">==-</span><span class="mi">1</span><span class="p">){</span>
                <span class="nx">i</span><span class="o">=</span><span class="nx">size</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.num li&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="nx">i</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&#34;active&#34;</span><span class="p">);</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.img li&#34;</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="nx">i</span><span class="p">).</span><span class="nx">stop</span><span class="p">().</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">1000</span><span class="p">).</span><span class="nx">siblings</span><span class="p">().</span><span class="nx">stop</span><span class="p">().</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span>
        <span class="p">}</span>

        <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.out&#34;</span><span class="p">).</span><span class="nx">hover</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">t</span><span class="p">);</span>
        <span class="p">},</span><span class="kd">function</span><span class="p">(){</span>
            <span class="nx">t</span><span class="o">=</span><span class="nx">setInterval</span><span class="p">(</span><span class="nx">move</span><span class="p">,</span><span class="mi">1500</span><span class="p">);</span>
        <span class="p">});</span>

        <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.out .right&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="nx">move</span><span class="p">()</span>
        <span class="p">});</span>
        <span class="nx">$</span><span class="p">(</span><span class="s2">&#34;.out .left&#34;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
           <span class="nx">moveL</span><span class="p">()</span>
        <span class="p">})</span>

        <span class="p">});</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="14编辑框">14.编辑框</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span><span class="lnt">105
</span><span class="lnt">106
</span><span class="lnt">107
</span><span class="lnt">108
</span><span class="lnt">109
</span><span class="lnt">110
</span><span class="lnt">111
</span><span class="lnt">112
</span><span class="lnt">113
</span><span class="lnt">114
</span><span class="lnt">115
</span><span class="lnt">116
</span><span class="lnt">117
</span><span class="lnt">118
</span><span class="lnt">119
</span><span class="lnt">120
</span><span class="lnt">121
</span><span class="lnt">122
</span><span class="lnt">123
</span><span class="lnt">124
</span><span class="lnt">125
</span><span class="lnt">126
</span><span class="lnt">127
</span><span class="lnt">128
</span><span class="lnt">129
</span><span class="lnt">130
</span><span class="lnt">131
</span><span class="lnt">132
</span><span class="lnt">133
</span><span class="lnt">134
</span><span class="lnt">135
</span><span class="lnt">136
</span><span class="lnt">137
</span><span class="lnt">138
</span><span class="lnt">139
</span><span class="lnt">140
</span><span class="lnt">141
</span><span class="lnt">142
</span><span class="lnt">143
</span><span class="lnt">144
</span><span class="lnt">145
</span><span class="lnt">146
</span><span class="lnt">147
</span><span class="lnt">148
</span><span class="lnt">149
</span><span class="lnt">150
</span><span class="lnt">151
</span><span class="lnt">152
</span><span class="lnt">153
</span><span class="lnt">154
</span><span class="lnt">155
</span><span class="lnt">156
</span><span class="lnt">157
</span><span class="lnt">158
</span><span class="lnt">159
</span><span class="lnt">160
</span><span class="lnt">161
</span><span class="lnt">162
</span><span class="lnt">163
</span><span class="lnt">164
</span><span class="lnt">165
</span><span class="lnt">166
</span><span class="lnt">167
</span><span class="lnt">168
</span><span class="lnt">169
</span><span class="lnt">170
</span><span class="lnt">171
</span><span class="lnt">172
</span><span class="lnt">173
</span><span class="lnt">174
</span><span class="lnt">175
</span><span class="lnt">176
</span><span class="lnt">177
</span><span class="lnt">178
</span><span class="lnt">179
</span><span class="lnt">180
</span><span class="lnt">181
</span><span class="lnt">182
</span><span class="lnt">183
</span><span class="lnt">184
</span><span class="lnt">185
</span><span class="lnt">186
</span><span class="lnt">187
</span><span class="lnt">188
</span><span class="lnt">189
</span><span class="lnt">190
</span><span class="lnt">191
</span><span class="lnt">192
</span><span class="lnt">193
</span><span class="lnt">194
</span><span class="lnt">195
</span><span class="lnt">196
</span><span class="lnt">197
</span><span class="lnt">198
</span><span class="lnt">199
</span><span class="lnt">200
</span><span class="lnt">201
</span><span class="lnt">202
</span><span class="lnt">203
</span><span class="lnt">204
</span><span class="lnt">205
</span><span class="lnt">206
</span><span class="lnt">207
</span><span class="lnt">208
</span><span class="lnt">209
</span><span class="lnt">210
</span><span class="lnt">211
</span><span class="lnt">212
</span><span class="lnt">213
</span><span class="lnt">214
</span><span class="lnt">215
</span><span class="lnt">216
</span><span class="lnt">217
</span><span class="lnt">218
</span><span class="lnt">219
</span><span class="lnt">220
</span><span class="lnt">221
</span><span class="lnt">222
</span><span class="lnt">223
</span><span class="lnt">224
</span><span class="lnt">225
</span><span class="lnt">226
</span><span class="lnt">227
</span><span class="lnt">228
</span><span class="lnt">229
</span><span class="lnt">230
</span><span class="lnt">231
</span><span class="lnt">232
</span><span class="lnt">233
</span><span class="lnt">234
</span><span class="lnt">235
</span><span class="lnt">236
</span><span class="lnt">237
</span><span class="lnt">238
</span><span class="lnt">239
</span><span class="lnt">240
</span><span class="lnt">241
</span><span class="lnt">242
</span><span class="lnt">243
</span><span class="lnt">244
</span><span class="lnt">245
</span><span class="lnt">246
</span><span class="lnt">247
</span><span class="lnt">248
</span><span class="lnt">249
</span><span class="lnt">250
</span><span class="lnt">251
</span><span class="lnt">252
</span><span class="lnt">253
</span><span class="lnt">254
</span><span class="lnt">255
</span><span class="lnt">256
</span><span class="lnt">257
</span><span class="lnt">258
</span><span class="lnt">259
</span><span class="lnt">260
</span><span class="lnt">261
</span><span class="lnt">262
</span><span class="lnt">263
</span><span class="lnt">264
</span><span class="lnt">265
</span><span class="lnt">266
</span><span class="lnt">267
</span><span class="lnt">268
</span><span class="lnt">269
</span><span class="lnt">270
</span><span class="lnt">271
</span><span class="lnt">272
</span><span class="lnt">273
</span><span class="lnt">274
</span><span class="lnt">275
</span><span class="lnt">276
</span><span class="lnt">277
</span><span class="lnt">278
</span><span class="lnt">279
</span><span class="lnt">280
</span><span class="lnt">281
</span><span class="lnt">282
</span><span class="lnt">283
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">.</span><span class="nc">edit-mode</span><span class="p">{</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#b3b3b3</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">8</span><span class="kt">px</span><span class="p">;</span>
            <span class="k">text-decoration</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
            <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">.</span><span class="nc">editing</span><span class="p">{</span>
            <span class="k">background-color</span><span class="p">:</span> <span class="mh">#f0ad4e</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;padding: 20px&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;CheckAll(&#39;#edit_mode&#39;, &#39;#tb1&#39;);&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;全选&#34;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;CheckReverse(&#39;#edit_mode&#39;, &#39;#tb1&#39;);&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;反选&#34;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;CheckCancel(&#39;#edit_mode&#39;, &#39;#tb1&#39;);&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;取消&#34;</span> <span class="p">/&gt;</span>

        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;edit_mode&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;edit-mode&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;javascript:void(0);&#34;</span>  <span class="na">onclick</span><span class="o">=</span><span class="s">&#34;EditMode(this, &#39;#tb1&#39;);&#34;</span><span class="p">&gt;</span>进入编辑模式<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">&#34;1&#34;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">thead</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>选择<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>主机名<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>端口<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>状态<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">thead</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">tbody</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;tb1&#34;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">edit</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span>v1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>v11<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">edit</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="na">edit-type</span><span class="o">=</span><span class="s">&#34;select&#34;</span> <span class="na">sel-val</span><span class="o">=</span><span class="s">&#34;1&#34;</span> <span class="na">global-key</span><span class="o">=</span><span class="s">&#34;STATUS&#34;</span><span class="p">&gt;</span>在线<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">edit</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span>v1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>v11<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">edit</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="na">edit-type</span><span class="o">=</span><span class="s">&#34;select&#34;</span> <span class="na">sel-val</span><span class="o">=</span><span class="s">&#34;2&#34;</span> <span class="na">global-key</span><span class="o">=</span><span class="s">&#34;STATUS&#34;</span><span class="p">&gt;</span>下线<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">edit</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span>v1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>v11<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">edit</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="na">edit-type</span><span class="o">=</span><span class="s">&#34;select&#34;</span> <span class="na">sel-val</span><span class="o">=</span><span class="s">&#34;1&#34;</span> <span class="na">global-key</span><span class="o">=</span><span class="s">&#34;STATUS&#34;</span><span class="p">&gt;</span>在线<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;../../jquery-1.12.4.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="cm">/*
</span><span class="cm">         监听是否已经按下control键
</span><span class="cm">         */</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">globalCtrlKeyPress</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>

        <span class="nb">window</span><span class="p">.</span><span class="nx">onkeydown</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">event</span> <span class="o">&amp;&amp;</span> <span class="nx">event</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">17</span><span class="p">){</span>
                <span class="nb">window</span><span class="p">.</span><span class="nx">globalCtrlKeyPress</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">};</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">onkeyup</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">){</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">event</span> <span class="o">&amp;&amp;</span> <span class="nx">event</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">17</span><span class="p">){</span>
                <span class="nb">window</span><span class="p">.</span><span class="nx">globalCtrlKeyPress</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">};</span>

        <span class="cm">/*
</span><span class="cm">         按下Control，联动表格中正在编辑的select
</span><span class="cm">         */</span>
        <span class="kd">function</span> <span class="nx">MultiSelect</span><span class="p">(</span><span class="nx">ths</span><span class="p">){</span>
            <span class="k">if</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">globalCtrlKeyPress</span><span class="p">){</span>
                <span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">ths</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">index</span><span class="p">();</span>
                <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">ths</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
                <span class="nx">$</span><span class="p">(</span><span class="nx">ths</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">parent</span><span class="p">().</span><span class="nx">nextAll</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;td input[type=&#39;checkbox&#39;]:checked&#34;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
                    <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">parent</span><span class="p">().</span><span class="nx">children</span><span class="p">().</span><span class="nx">eq</span><span class="p">(</span><span class="nx">index</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">val</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
                <span class="p">});</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span><span class="p">&gt;</span>

<span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
    <span class="nx">BindSingleCheck</span><span class="p">(</span><span class="s1">&#39;#edit_mode&#39;</span><span class="p">,</span> <span class="s1">&#39;#tb1&#39;</span><span class="p">);</span>
<span class="p">});</span>

<span class="kd">function</span> <span class="nx">BindSingleCheck</span><span class="p">(</span><span class="nx">mode</span><span class="p">,</span> <span class="nx">tb</span><span class="p">){</span>

    <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="kd">var</span> <span class="nx">$tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">().</span><span class="nx">parent</span><span class="p">();</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">mode</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">&#39;editing&#39;</span><span class="p">)){</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">)){</span>
                <span class="nx">RowIntoEdit</span><span class="p">(</span><span class="nx">$tr</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="nx">RowOutEdit</span><span class="p">(</span><span class="nx">$tr</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">});</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">CreateSelect</span><span class="p">(</span><span class="nx">attrs</span><span class="p">,</span><span class="nx">csses</span><span class="p">,</span><span class="nx">option_dict</span><span class="p">,</span><span class="nx">item_key</span><span class="p">,</span><span class="nx">item_value</span><span class="p">,</span><span class="nx">current_val</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">sel</span><span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;select&#39;</span><span class="p">);</span>
    <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">attrs</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">){</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">sel</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">);</span>
    <span class="p">});</span>
    <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">csses</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">){</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">sel</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">);</span>
    <span class="p">});</span>
    <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">option_dict</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">k</span><span class="p">,</span><span class="nx">v</span><span class="p">){</span>
        <span class="kd">var</span> <span class="nx">opt1</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;option&#39;</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">sel_text</span> <span class="o">=</span> <span class="nx">v</span><span class="p">[</span><span class="nx">item_value</span><span class="p">];</span>
        <span class="kd">var</span> <span class="nx">sel_value</span> <span class="o">=</span> <span class="nx">v</span><span class="p">[</span><span class="nx">item_key</span><span class="p">];</span>

        <span class="k">if</span><span class="p">(</span><span class="nx">sel_value</span><span class="o">==</span><span class="nx">current_val</span><span class="p">){</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">opt1</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">sel_text</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">,</span> <span class="nx">sel_value</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;text&#39;</span><span class="p">,</span> <span class="nx">sel_text</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;selected&#39;</span><span class="p">,</span><span class="kc">true</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">sel</span><span class="p">));</span>
        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="nx">opt1</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">sel_text</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">,</span> <span class="nx">sel_value</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;text&#39;</span><span class="p">,</span> <span class="nx">sel_text</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">sel</span><span class="p">));</span>
        <span class="p">}</span>
    <span class="p">});</span>
    <span class="k">return</span> <span class="nx">sel</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">STATUS</span> <span class="o">=</span> <span class="p">[</span>
    <span class="p">{</span><span class="s1">&#39;id&#39;</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="o">:</span> <span class="s2">&#34;在线&#34;</span><span class="p">},</span>
    <span class="p">{</span><span class="s1">&#39;id&#39;</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="o">:</span> <span class="s2">&#34;下线&#34;</span><span class="p">}</span>
<span class="p">];</span>

<span class="nx">BUSINESS</span> <span class="o">=</span> <span class="p">[</span>
    <span class="p">{</span><span class="s1">&#39;id&#39;</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="o">:</span> <span class="s2">&#34;车上会&#34;</span><span class="p">},</span>
    <span class="p">{</span><span class="s1">&#39;id&#39;</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="o">:</span> <span class="s2">&#34;二手车&#34;</span><span class="p">}</span>
<span class="p">];</span>

<span class="kd">function</span> <span class="nx">RowIntoEdit</span><span class="p">(</span><span class="nx">$tr</span><span class="p">){</span>
    <span class="nx">$tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;edit&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;true&#34;</span><span class="p">){</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;edit-type&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;select&#34;</span><span class="p">){</span>
                <span class="kd">var</span> <span class="nx">select_val</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;sel-val&#39;</span><span class="p">);</span>
                <span class="kd">var</span> <span class="nx">global_key</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;global-key&#39;</span><span class="p">);</span>
                <span class="kd">var</span> <span class="nx">selelct_tag</span> <span class="o">=</span> <span class="nx">CreateSelect</span><span class="p">({</span><span class="s2">&#34;onchange&#34;</span><span class="o">:</span> <span class="s2">&#34;MultiSelect(this);&#34;</span><span class="p">},</span> <span class="p">{},</span> <span class="nb">window</span><span class="p">[</span><span class="nx">global_key</span><span class="p">],</span> <span class="s1">&#39;id&#39;</span><span class="p">,</span> <span class="s1">&#39;value&#39;</span><span class="p">,</span> <span class="nx">select_val</span><span class="p">);</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">selelct_tag</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="kd">var</span> <span class="nx">orgin_value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">();</span>
                <span class="kd">var</span> <span class="nx">temp</span> <span class="o">=</span> <span class="s2">&#34;&lt;input value=&#39;&#34;</span><span class="o">+</span> <span class="nx">orgin_value</span><span class="o">+</span><span class="s2">&#34;&#39; /&gt;&#34;</span><span class="p">;</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">temp</span><span class="p">);</span>
            <span class="p">}</span>

        <span class="p">}</span>
    <span class="p">});</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">RowOutEdit</span><span class="p">(</span><span class="nx">$tr</span><span class="p">){</span>
    <span class="nx">$tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;edit&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;true&#34;</span><span class="p">){</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;edit-type&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;select&#34;</span><span class="p">){</span>
                <span class="kd">var</span> <span class="nx">new_val</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">children</span><span class="p">(</span><span class="s1">&#39;:first&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
                <span class="kd">var</span> <span class="nx">new_text</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">children</span><span class="p">(</span><span class="s1">&#39;:first&#39;</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s2">&#34;option[value=&#39;&#34;</span><span class="o">+</span><span class="nx">new_val</span><span class="o">+</span><span class="s2">&#34;&#39;]&#34;</span><span class="p">).</span><span class="nx">text</span><span class="p">();</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;sel-val&#39;</span><span class="p">,</span> <span class="nx">new_val</span><span class="p">);</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">new_text</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="kd">var</span> <span class="nx">orgin_value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">first</span><span class="p">().</span><span class="nx">val</span><span class="p">();</span>
                <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">orgin_value</span><span class="p">);</span>
            <span class="p">}</span>

        <span class="p">}</span>
    <span class="p">});</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">CheckAll</span><span class="p">(</span><span class="nx">mode</span><span class="p">,</span> <span class="nx">tb</span><span class="p">){</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">mode</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">&#39;editing&#39;</span><span class="p">)){</span>

        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>

            <span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">check_box</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">first</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">)){</span>

            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>

                <span class="nx">RowIntoEdit</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">});</span>

    <span class="p">}</span><span class="k">else</span><span class="p">{</span>

        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">CheckReverse</span><span class="p">(</span><span class="nx">mode</span><span class="p">,</span> <span class="nx">tb</span><span class="p">){</span>

    <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">mode</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">&#39;editing&#39;</span><span class="p">)){</span>

        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">check_box</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">first</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">)){</span>
                <span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
                <span class="nx">RowOutEdit</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
                <span class="nx">RowIntoEdit</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">});</span>


    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        
        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">check_box</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">first</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">)){</span>
                <span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">});</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">CheckCancel</span><span class="p">(</span><span class="nx">mode</span><span class="p">,</span> <span class="nx">tb</span><span class="p">){</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">mode</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">&#39;editing&#39;</span><span class="p">)){</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">check_box</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">first</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">)){</span>
                <span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
                <span class="nx">RowOutEdit</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>

            <span class="p">}</span><span class="k">else</span><span class="p">{</span>

            <span class="p">}</span>
        <span class="p">});</span>

    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">).</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">EditMode</span><span class="p">(</span><span class="nx">ths</span><span class="p">,</span> <span class="nx">tb</span><span class="p">){</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nx">ths</span><span class="p">).</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">&#39;editing&#39;</span><span class="p">)){</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">ths</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;editing&#39;</span><span class="p">);</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">check_box</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">first</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">)){</span>
                <span class="nx">RowOutEdit</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>

            <span class="p">}</span>
        <span class="p">});</span>

    <span class="p">}</span><span class="k">else</span><span class="p">{</span>

        <span class="nx">$</span><span class="p">(</span><span class="nx">ths</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;editing&#39;</span><span class="p">);</span>
        <span class="nx">$</span><span class="p">(</span><span class="nx">tb</span><span class="p">).</span><span class="nx">children</span><span class="p">().</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">check_box</span> <span class="o">=</span> <span class="nx">tr</span><span class="p">.</span><span class="nx">children</span><span class="p">().</span><span class="nx">first</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;:checkbox&#39;</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">check_box</span><span class="p">.</span><span class="nx">prop</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">)){</span>
                <span class="nx">RowIntoEdit</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>

            <span class="p">}</span>
        <span class="p">});</span>

    <span class="p">}</span>
<span class="p">}</span>


    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div>
    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">even</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2017-08-10
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      <div class="post-tags">
          <a href="/tags/jquery/">jQuery</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/post/javascript/javascript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%B2%BE%E8%A6%81%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">JavaScript面向对象精要读书笔记</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/post/1/even-preview/">
            <span class="next-text nav-default">Theme preview</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:your@email.com" class="iconfont icon-email" title="email"></a>
      <a href="http://localhost:1313" class="iconfont icon-stack-overflow" title="stack-overflow"></a>
      <a href="http://localhost:1313" class="iconfont icon-twitter" title="twitter"></a>
      <a href="http://localhost:1313" class="iconfont icon-facebook" title="facebook"></a>
      <a href="http://localhost:1313" class="iconfont icon-linkedin" title="linkedin"></a>
      <a href="http://localhost:1313" class="iconfont icon-google" title="google"></a>
      <a href="http://localhost:1313" class="iconfont icon-github" title="github"></a>
      <a href="http://localhost:1313" class="iconfont icon-weibo" title="weibo"></a>
      <a href="http://localhost:1313" class="iconfont icon-zhihu" title="zhihu"></a>
      <a href="http://localhost:1313" class="iconfont icon-douban" title="douban"></a>
      <a href="http://localhost:1313" class="iconfont icon-pocket" title="pocket"></a>
      <a href="http://localhost:1313" class="iconfont icon-tumblr" title="tumblr"></a>
      <a href="http://localhost:1313" class="iconfont icon-instagram" title="instagram"></a>
      <a href="http://localhost:1313" class="iconfont icon-gitlab" title="gitlab"></a>
      <a href="http://localhost:1313" class="iconfont icon-bilibili" title="bilibili"></a>
  <a href="https://zhouxiaoxin.gitee.io/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  <div class="busuanzi-footer">
    <span id="busuanzi_container_site_pv"> 本站总访问量 <span id="busuanzi_value_site_pv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 次 </span>
      <span class="division">|</span>
    <span id="busuanzi_container_site_uv"> 本站总访客数 <span id="busuanzi_value_site_uv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 人 </span>
  </div>

  <span class="copyright-year">
    &copy; 
    2018 - 
    2022
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">even</span>
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/js/main.min.2517c0eb67172a0bae917de4af59b10ca2531411a009d4c0b82f5685259e5771.js"></script>








</body>
</html>
